CSS3_Day02
CSS三大特性
- 继承
- 层叠:选择器相同 层叠性
- 优先级:选择器不同 优先级
选择器进阶
- 复合选择器
- 交集选择器
- div.box {} 交集选择器各选择器紧挨着,中间没有空格,如果有标签选择器,标签选择器必须写在最前边,eg:div.class {}
- 并集选择器
- ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
- hover伪类选择器
- 四类基础选择器都可以用hover ,eg: p:hover
后代选择器
各标签逐及写 中间用空格隔开
.hot>a { color: red; }
子选择器
父标签>子标签
.hot>a { color: red; }
并集选择器
- 如果有标签选择器 标签选择器写在最前边
- 并集选择器 选择的是 既满足条件A 又满足条件B 的一个标签
链接伪类选择器
未访问过的链接 :a:link
点击过的链接:a:visited
鼠标经过的链接 : .a:hover
鼠标按下还没有谈起的那个链接 : a:active
foucus伪类选择器
一般情况下表单元素才能获取
块级元素
- 块级元素独占一行 常见的有 div、 p、 h1-h6、
- 是一个容器 里面可以放行内或块级元素
- 高度、宽都可以设置
- 默认宽度是容器100%
- 文字类元素不能使用块级元素
内不能放
行内元素
设置宽高没用
背景的复合写法
-
background-color:颜色默认 是 transparent
- #十六进制(transparent)
- rgb(,,,)
- rgba(,,,,透明度:数值0-1之间)
-
background-image:图片(url)
- 添加背景图片 盒子必须设置宽高,url可以不加引号
-
background-repeat
- 默认延x轴、y轴平铺
- repeat-x
- repeat-y
- no-repeat
-
background-position位置
- 方位名词(center right)
- 具体像素
-
background复合写法(推荐):推荐顺序 color img repeat position
- 注意:单个写法要写在 复合写法后面,防止相同的属性写多次被覆盖掉
背景透明
background: rgba(0,0,0,.3)
单行文字垂直居中显示
-
将文字高度与盒子高度一致
-
将文字高度小于盒子高度10左右
background-position
-
混合单位、精确单位两个数值分别是 X、Y
-
如果是方位名词 center right=right center
常见的元素显示模式
- 块级元素
- 行内元素
- 行内块元素
块级元素代表标签
- div、p(p 标签内不要嵌套div、p、h 等块级元素)、h
- 块级元素的特点:
- 独占一行,宽度默认是父元素宽度,高度由内容撑开
- 可以设置宽高
行内元素
-
一行可以显示多个
-
宽、高度由内容撑开
-
不可以设置宽高
-
常见的有:a、span、em、b、u、i
行内块元素
-
一行可以显示多个
-
可以设置宽高
-
常见的有:input、button、textarea、select
-
特殊的有:img 但是chrome 调试的时候显示的是inline
元素转换模式
- 转换成块级元素:display:block;
- 转换成行内元素:display:inline;
- 转换成行内块级元素:inline-block;
居中的方法
-
水平居中
-
text-align:center–>使其父盒子水平居中
-
行内元素:a、span、
-
行内块元素:input、img
-
-
margin:0 auto
- 块级元素
-
-
垂直居中
- line-height
- 单行文本
- line-height
任何标签都可以添加伪类
- a:hover { color:red–>鼠标悬停文字变成红色 background-color–>鼠标悬停背景变成。。颜色}
div:hover
继承性
本身有不再继承
链接本身有 color 不会继承父元素颜色
font- text- line- color
a标签、h系列会继承失败
注意事项
- css中写复合属性 中间用空格隔开
- 一个标签需要多个类名 需要用空格隔class=“box1 box2 …”
- <div id=“” class=“”>
- 、
- 首行缩进 块元素
- typora 写html 代码 开头加 \ 代码会显示出