![前端--css基础02(css特性.行块级特点.属性[背景.颜色 文字及其文字阴影])](https://2000zi.500zi.com/uploadfile/img/14/960/87a6b17c1796d192cc49ed0b2ebbe7f4.jpg)
css 基础属性
1. 网页中的显示方式
块级元素：
div, p, ul，ol, dl，li,dt,dd,h1…
特点：
✔ 所有的块级元素独占一行显示(与宽度无关)
✔ 如果一个块级元素没有设置宽度，那么其默认宽度是等于其父元素的宽度。
✔ 块级元素可以设置宽度或高度改变其大小。
✔ 块级元素元素的高度默认是被其内容撑开
行内元素
span,a,strong,em,font…
特点：
✔ 所有的行内元素都在一行显示
✔ 所有的行内元素默认的宽度和高度都是其内容撑开的大小
✔ 行内元素默认不能设置宽度和高度
行内块元素
input, img…
特点：
✔ 所有的行内块元素都在一行显示
✔ 所有的行内块元素都可以设置宽度和高度。
2. 网页中元素的模式转化
display: block; ----> 转化为块级元素
display: inline-block; —> 转化为行内块元素
display: inline; —> 转化为行内元素
3. CSS特性：
层叠性：
条件：
✔ 必须是相同的选择器(选择器的权重相同情况下)
✔ 选择器必须选中同一个标签
✔ 属性冲突的时候，最后定义的样式会将前面定义的样式覆盖掉
继承性：
条件：
✔ 必须在嵌套结构中
✔ 子元素没有默认样式的时候其样式会受父元素样式的影响
可以被继承的属性：
color: 可以被继承
font-size: 可以被继承
font属性中的所有属性都可以被继承。
不可以被继承的属性：
width 和 height
优先级：
特点：
✔ 选择器不一样
✔ 选中同一个标签
优先级排序：
标签选择器 < 类选择器 < ID选择器 < 行内样式 < !important
10 100 1000 10000 10000+
✔ 优先级中的第一个特点：
继承的权重为0;
✔ 优先级的第二个特点：
如果使用不同的选择器，选中同一个标签（优先考虑叠加运算，然后考虑是否有层叠）
权重可以叠加
4.伪类选择器: 用来选中页面中标签的。【需要用户的动作】
☞ :link {属性: 值;} ----》 用来设置链接的样式的。
注意：1.不推荐使用:link设置a标签的样式2.存在兼容性问题
☞ :visited {属性：值;} ----> 用来设置标签被访问过后的样式
注意：1.visited通过获取浏览器中的缓存地址实现的效果2.只能设置与颜色相关的属性
☞ :hover {属性: 值;} —> 用来设置鼠标悬停时候标签的样式[掌握]
注意：1. 在该选择器中可以设置任何的属性。
☞ :active {属性：值;} —>设置标签被激活后的样式
☞ :focus {属性：值；} —> 设置当前标签获取到鼠标焦点时候的样式【掌握】
3. 重要的属性简介
背景复合属性：
☞ 背景色： background-color: transparent(默认颜色透明设置)
☞ 背景图片： background-image: url(路径)
注意： 1. 背景图片默认是平铺
☞ 设置背景图片的平铺方式：
background-repeat: repeat(默认值) | no-repeat | repeat-x(水平平铺) | repeat-y(垂直平铺)
☞ 设置背景图片位置: background-positio
☞ 背景属性合写：
background:background-color background-image background-repeat background-position;
✔ 第一种设置方式可以直接设置方位名称：
left | top | right | bottom | center
✔ 背景设置位置第二种方式：
直接设置具体数字注意：1. 设置具体数字的时候，第一个值代表水平方向，第二值代表垂直方向2. 如果只设置一个值，那么第二个值默认代表垂直居中
注意： 在网页中所有的元素默认都是在父元素的左上角显示
文字阴影：
text-shadow: 0px 0px 10px red;
第一个值代表： 阴影在水平方向的偏移（整数向右移动，负数向左移动）
第二个值代表： 阴影在垂直方向的偏移（正数向下移动，负数向上移动）
第三个值代表： 阴影的清晰度（模糊度）
第四个值代表： 阴影的颜色
注意： 如果要设置多个阴影，那么使用逗号隔开即可。
文本（文字）属性合写：
☞ 文字大小 ： font-size
☞ 文字斜体 ： font-style: normal(正常) | italic(斜体)
☞ 文字加粗显示： font-weight: 400 = normal(正常) | 700=bold(加粗)
☞ 文字字体： font-family: ‘宋体,黑体,微软雅黑…’
通过编码表示一个字体：5b8b\4f53 --> 宋体
☞ 文字行高：line-height: 用来设置文字与文字上下之间的距离
font: font-style font-weight font-size/line-height font-family;
例如： font: italic 700 100px/150px '宋体';*注意事项：1. font属性合写中必须设置font-size 和 font-family;2. font-size 必须 在 font-family 之前设置3. 如果要设置行高，那么必须在文字大小后面设置行高4.如果属性都要设置那么按照 font: font-style font-weight font-size/line-height font-family;顺序设置即可
CSS中颜色的表示方式：
☞ 预定义表示法： red ,pink…
☞ 十六进制表示法：#a-f(0-9) [一共是6位]
#ffffff #fff000
☞ rgb表示颜色(三原色)
r ---> red （0,255）g ---> green (0,255)b ---> blue (0,255)
☞ rgba实现半透明颜色效果
a ----> alpha(透明度) [0,1]例如:background-color: rgba(0,0,0,0.6);
