CSS入门 day01

+# CSS 入门 day01

css

一、什么是css？
css是层叠样式表，是一个用于修饰文档的语言
二、css语法
1.属性名和属性值之间用“：”隔开
多对属性用“；”隔开
最后一对属性可以不加“；”
2.速记写法（简写形式）
border：1px solid red
border-width:1px
border-top-width
border-left-width
border-right-width
border-bottom-width
一个1px 可以写成4个 相当于12个

padding：10px；//上下左右均为10px
padding：10px 20px；//上下10px 左右20px
padding：10px 20px 30px；//上10px 左右20px 下30px
padding：10px 20px 30px 40px；//上右下左 （ 顺时针）
margin 同上

3.注释
①注释写法
/*注释内容 /
②注释的作用
解释说明
更好的维护和管理
③注释不能嵌套使用
因为注释有开始和结束标签，当开始标签遇到结束标签就是一个注释

三、html中引入css的方式
1.行内样式
style属性

<div style=""></div>

2.内联样式
style标签

<style>
div{css语法}
</style>

3.外部引入
创建.css为后缀名的文件
link标签：先加载css （写在head里面 不写在style里面）
@import url（）：不建议使用，因为先加载html （

4.引入css的优先级问题
行内样式>内联样式/外部引入（特征值相同时，选中就近原则）

四、选择器

1.标签选择器/元素选择器
根据标签名称选择一类元素

2.id选择器
通过id属性选择一个属性
#value

3.类选择器
class: .value

4.普遍选择器
*：所有

5.后代选择器
selector1>selector2 : 选择直接子元素
selector1 selector2 : 选择所有后代元素，包含孙代元素
（选择的元素都要满足selector2）
6.兄弟选择器
selector1+selector2：选择selector1之后的一个兄弟且这个兄弟必须满足selector2，如果之后的一个兄弟不满足selector2，则不选。
selector1~selector2：选择selector1之后的所有兄弟元素，但选择的兄弟必须满足selector2
7.属性选择器
[id]：选择页面中具有id属性的元素
[class=“one”]:选择页面中具有class属性的且属性值为one（必须精准为one）
[class~=“one”]:选择页面中具有class属性，且属性值之一为one的
[class^=“o”]: 选择页面中具有class属性的且属性值以“o”开头的
[class$=“o”]:选择页面中具有class属性的且属性值以“o”结尾的
[class*=“o”]:选择页面中具有class属性且属性值中包含“o”的
8.多选择器
使用逗号隔开多个选择器
9.组合选择器
多个选择器组合到一起使用（直接连在一起使用不用加空格，先选择满足第一个的再选择满足第二个的）
10.伪类选择器
选择器：伪类名称
①：first-child 选择当前元素是父元素的第一个孩子（eg：div：first-child 表示div是父元素下的第一个孩子 选择的是div）
②：last-child 选择当前元素是父元素的最后一个孩子（eg：p：last-child 表示p是父元素的最后一个孩子，选择的是p）
③：nth-child（number/odd/even）number表示的是顺序，odd表示的奇数的个，even表示的是偶数个

和状态相关的伪类
①：hover 当鼠标悬停在元素上时
②：active 当鼠标按下不松开时
③：link 当鼠标没点击时（未被访问时）
④：visited 当点击过后之后的一个状态
设置顺序：link–>visited–>hover–>active
11.伪元素选择器

::伪元素的名称
①::first-letter 选择第一个字符
②::first-line 选择第一行
③::selection 当文本被选中时（用鼠标选中时的状态）
④::before 在当前元素“内容”之前
content：text/url()
⑤::after 在当前元素“内容”之后

五、选择器的优先级

1.优先级需要根据特性值的大小来计算，特性值越大，优先级越高，特性值相同时，就近原则（越靠近下优先级越高）
style属性中：1000
id选择器：100
类选择器/属性选择器/伪类选择器：10
元素选择器/伪元素选择器：1
组合选择器将特性值相加
1.！important：不计入特性值中，使用该属性优先级最高（不建议使用）

六、文本样式

1.如何选择元素？
选择器
2.如何设置样式

①继承
inherit：继承父类属性
initial：不继承父类属性
unset：不设定，根据属性的本来特性，默认继承则继承，默认不继承则不继承

②颜色单位
a.关键字 blue red
b.rgb(r,g,b):r、g、b的取值范围均在0-255之间
c.rgba(r,g,b,a) :r,g,b的取值范围在0-255之间，a表示透明度，取值范围在0-1之间
d.十六进制

③长度和尺寸
a.绝对值单位 px（在任何状态下都不变eg：100px 在手机端和电脑都是100px）
b.相对单位em（与当前元素字体大小相同）
c.相对单位 百分比

3.字体样式

①color ：为字体指定颜色
②font-style：用于打开和关闭斜体文本
a.normal:正常字体，关闭斜体
b.italic:斜体
c.oblique:模拟斜体
③font-weight:为字体设置粗细程度
a.normal,bold :正常（400）；加粗（700）
b.lighter,bolder:当前元素比父元素更细/更粗
c.100-900：值越大越粗
④font-size ：改变字体尺寸
⑤text-transform：允许字体改变
a.none:防止任何改变
b.uppercase:将文本转换为大写
c.lowercase: 将文本转换为小写
d.full-width:转换为等宽
⑥text-align：设置文本位置
left/right/center
⑦text-decoration :对文本进行修饰
a.none :取消所有修饰
b.underline:加下划线
c.overline:加上划线
d.line-through:删除线
⑧text-shadow ：设置文本阴影

a.none:取消所有阴影
b.h-shadow:水平阴影（右为正，左为负）
c.v-shadow:垂直阴影（下为正，上为负）
d.blur:模糊的距离
e.color：模糊的颜色
text-shadow:h-shadow v-shadow blur color
⑨text-indent ：设置一个块元素首行文本内容的缩进量
⑩font-family 设置字体样式
⑪word-sapcing:设置单词间的距离
letter-spacing：设置字符间的距离
word-wrap：break-word 超出父元素宽度是否换行显示
overflow：超出父元素部分如何设置
包括hidden：隐藏 scroll 以滚动条形式展示

a.网络字体
b.字体图标库：fontawesome：class=“fa fa-xxx"
iconfont:class=“iconfont xxx”
c.本地字体：c:/windows/fonts

4.列表样式
①list-style-type:设置标志类型
a.none 取消样式
b.disc 实心圆
c.circle 空心圆
d.upper-roman 大写罗马数字
e.lower-roman 小写罗马数字
②list-style-positon:设置标志出现的位置
a.outside 框的外面
b.inside 框的里面
③list-style-image:自定义
url（）：指定图片的位置
④line-height：设置列表的行高（两行文字之间的距离叫做行高。如果一个块级元素只有一行元素时，让文字垂直居中，将行高的值设置成与width的值一样 ，则文字居中。）

5.元素的隐藏和显示
①display：
none：元素的隐藏（隐藏元素所占据的控件）
block：元素的显示
②visibility
hidden：隐藏（不隐藏元素占据的控件，相当于修改了元素的透明度）
visible：显示
6.表格样式
①border-collapse：设置表格的边框时分开还是合并
separate：默认分开
collapse：合并，相邻的两个格子共享边框

②caption-side： caption的位置
top/bottom/left/right