CSS3_Day02

CSS3_Day02

CSS三大特性

1. 继承
2. 层叠：选择器相同 层叠性
3. 优先级：选择器不同 优先级

选择器进阶

• 复合选择器
• 交集选择器
  • 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

常见的元素显示模式

1. 块级元素
2. 行内元素
3. 行内块元素

块级元素代表标签

• 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;

居中的方法

1. 水平居中

   • text-align：center–>使其父盒子水平居中

     • 行内元素：a、span、

     • 行内块元素：input、img

   • margin:0 auto

     • 块级元素

2. 垂直居中

   • 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 代码 开头加 \ 代码会显示出