[图片上传失败...(image-4dff12-1590810317192)]
1.css介绍
[图片上传失败...(image-3cc365-1590810317192)]
什么是css
css指层叠样式表
样式定义如何显示html元素
样式通常存储在样式表中
把样式添加到css文件中，是为了解决内容和表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常储存在css文件中
多个样式定义可层叠为一个
2.两个常用容器
-
div容器
容器：可以盛放其他元素的元素；
div容器：用于盛放html内容；
块级标签
-
span容器
行级标签
一般用于存放文字
3.css语法
css规则由两个主要部分构成：选择器，以及一条或者多条声明；
选择器通常是您需要改变样式的html元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性。
每个属性有一个值。属性和值被冒号分开。
[图片上传失败...(image-45dded-1590810317192)] ## css三种引用方式
-
行内引入
- style=“属性名1：属性词；属性二：属性词；”
-
内部样式
写在头部head中
写在style标签中
严格遵守css语法
-
外部样式
一般放在css文件夹下
将样式保存在css文件中
在原文件中，使用link进行映入
[图片上传失败...(image-e6fa0b-1590810317192)]
常用的选择器
-
标签选择器
- 标签名{css声明}
-
id选择器
操作得前提：操作得内容必须有id属性
id的名称要求唯一
-
+id{css声明}
场景：对于多个相同的标签操作其中一个
-
class选择器
操作前提：操作的内容中必需有class属性
可为多个内容设置class属性
.+class名称{css声明}
场景：对多个标签进行操作
-
后代选择器
找出指定的标签所有符合条件的后代。包括儿子级孙子级等等
标签名 后代标签名{css声明}
-
子代选择器
找出指定标签所有符合条件的子代
标签名>子代标签名{css声明}
-
属性选择器
[title]选中所有含有title属性的内容
[title=值]包含title属性的且值为“值”的
-
通配选择器*
用途一，基本设置
用途二，清除浏览器默认样式
*{css声明}
[图片上传失败...(image-760d33-1590810317191)]
多重样式优先级
一般来说：行内样式>内部样式>外部样式
具体划分：
1.样式的元素选择器越精确，则样式优先级越高
id选择器>类选择器>元素标签
2.相同类型的选择器。越靠后优先级越高
3.！important优先级最高
[图片上传失败...(image-3bdb3-1590810317191)]
[图片上传失败...(image-d92e8f-1590810317191)]
[图片上传失败...(image-43b6ef-1590810317191)]
常用
css字体
font-style： normal 正常
font-style：italic 斜体
font-style：oblique 斜体
css文本
text-transform ：uppercase 全部大写
text-transform ：lowercase 全部小写
text-transform ：capitalize 首字母大写
text-indent： 文本缩进
text-align： 对齐方式
链接
a:link {color:#000000;} /* 未访问链接/
a:visited {color:#00FF00;} /* 已访问链接 */ *
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 / a:active {color:#0000FF;} / 鼠标点击时 */
列表
none 取消列表项
square：正方形
circle：空心圆形
upper-Roman 大写罗马字体
lower-Roman 小写罗马字体
upper-alpha 大写字母表
lower-alpha 小写字母表
表格
table, td, th { border:1px solid green; } th { background-color:green; color:white;
边框
solid 实线
dashed 虚线
dotted 点
double 双线
none 取消边框线
背景
background-color
background-image
background-repeat
background-attachment
background-position
盒子模型
[图片上传失败...(image-3ed18-1590810317191)]
[图片上传失败...(image-d1f953-1590810317191)]
块级元素和行级元素
[图片上传失败...(image-ef1d05-1590810317191)]
块级标签
p
div
h1-h6
list
块级元素
块级转行级别 display：inline
行级转块级 diaplay：block
块级转行内块级 display：inline-block
隐藏 display：none
[图片上传失败...(image-9dd29d-1590810317191)]
定位
[图片上传失败...(image-967aa6-1590810317191)]
fixed固定显示器
[图片上传失败...(image-e46df9-1590810317191)]
relative 固定在父元素
absolute 绝对位置 相对最近已经定位的父元素
圆角
border-radius ：12px；
让任何元素获得圆角
