type
status
date
slug
summary
tags
category
icon
password
第一章 选择器进阶
1.1 后代选择器
根据HTML标签的嵌套关系,选择父元素后代(儿子,孙子,重孙等)中满足条件的元素.
语法:
父选择器 后代选择器 {css}在上例子中,对p标签内容”这是div标签中的p标签”声明样式,如果不用id,clss,通配符等直接定位的选择器方式声明样式,而是通过他的父级标签div来顺藤摸瓜定位到它来进行声明
1.2 子代选择器
根据HTML标签的嵌套关系,选择父元素子代(众多儿子)中的满足条件的元素.
语法:
父选择器>子代选择器{css}1.3 并集选择器
并集选择器可以同时选择多组标签,设置相同的样式.这样可以化简你的代码.
语法:
选择器,选择器2{css} 注:并集选择器中的每组选择器通常一行写一个,提高代码的可读性.
1.4 交集选择器
选中页面中同时满足多个选择器的标签
语法:
选择器1.选择器2{css}注:
- 选择器之间紧凑,没有东西隔开
- 交集选择器中如果有标签选择器,标签选择器必须写在最前面.
1.5 hover伪类选择器
选中鼠标悬停在元素上的状态,设置样式.比方鼠标移动到超链接元素,元素字体颜色改变.
语法:
选择器:hover{css} 1.6 emmet语法
通过简洁语法,快速生成代码
语法:
记忆 | 示例 | 效果 |
标签名 | div | <div></div> |
类选择器 | .red | <div class="red"></div> |
id选择器 | #one | <div id="one"></div> |
交集选择器 | p.red#one | <p class="red" id="one"></p> |
子代选择器 | ul>li | <ul><li></li></ul> |
内部文本 | ul>li{li内部文本} | <ul><li>我是li的内容</li></ul> |
创建多个 | ul>li*3 | <ul><li></li><li></li><li></li></ul> |
css中提示语:
绝大多数为内容首字母
简写 | 实现效果 |
fs | font-style |
fsz | font-size: |
fw700 | font-weight:700 |
bgc | backgroud-color: |
w300+h200+bgc | width: 300px;
height: 200px;
background-color: #fff; |
第二章 背景相关属性
背景相关属性特别背景图，依赖div标签的存在，不能单独撑开div标签。而如果仅是想在网页展示图片，可以直接用img标签。
2.1 背景色
语法：
background-color:颜色值 颜色值可以为：关键字（如red）rgb表示法 rgba表示法 十六进制等
注:背景色不会影响盒子大小,相反可以借此看清盒子大小和位置
2.2 背景图片
语法:
background-image: url("图片路径");注:图片作为背景色,要注意图片像素大小和盒子像素大小的一致性.如果盒子是400px * 400px而图片是200px * 200px,那么图片就会以2*2四个图片铺在背景上.
2.3 背景平铺
语法：
background-repeat：属性值属性值：
值 | 效果 | ㅤ |
repeat | （默认）水平和垂直方向都平铺 | ㅤ |
no-repeat | 不平铺 | 单张图片在背景中 |
repeat-x | 沿着水平方向平铺 | 以图片大小为单元，瓷砖式平铺第一排 |
repeat-y | 沿着垂直方向平铺 | 以图片大小为单元，瓷砖式平铺第一列 |
2.4 背景位置
声明的不是盒子的位置，而是盒子中背景图片的位置。背景色和背景图只显示在盒子里面
语法：
background-position:x轴位置 y轴位置属性值：
- 位置名次描述：
- 水平方向：left，center，right
- 垂直方向：top，center，bottom
- 数字+px(坐标)
- 原点：(0,0)
- x轴：水平向右
- y轴：垂直向下
注：正数向右向下移动，负数向左向上移动；方位名次和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直。
2.5 属性值的连写
连写不分先后顺序！
背景图片位置如果是英文单词，可以颠倒顺序
第三章 显示模式
在这章将会讲解css中非常重要知识点，包括块内元素，行内元素，行内块元素，以及元素显示模式转换。
3.1 块内元素
显示特点：独占一行；宽度默认为父元素宽度100%，高度由内容撑开；可以设置宽高
代表标签：div，p，h系列，ul，li，dl，dt，dd，form，header，nav，footer…
3.2 行内元素
显示特点：一行可以显示多个；宽高默认由内容撑开；不可以设置宽度
代表标签：a， ，b，u，i，s，strong，ins，em，del…
3.3 行内块元素
显示特点：一行显示多个；可以设置多个
代表标签：input，textarea，button，select….
注：img标签有行内块元素特点，但Chrome调试工具中显示结果是inline
3.4 元素显示模式转化
模式转化可以改变元素默认的显示特点，让元素符合布局要求
语法：
display:属性值属性值 | 效果 | 使用频次 |
block | 转换成块元素 | 较多 |
inline-block | 转换成行内块元素 | 较多 |
inline | 转换成行内元素 | 较少 |
例如，a标签是行内标签，默认宽高不生效，需要转成行内块或块元素。参看案例
3.5 HTML嵌套规范
- 块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等
- 但是：p标签中不要嵌套div，p，h等块级元素
- a标签内部可以嵌套任意元素
- 但是：a标签不能嵌套a标签
3.6 案例
需求：在一行做5个到导航栏超链接标签，每个每个标签宽100px，高50px，背景颜色为红色，鼠标悬浮变成黄色，导航标签内容为语文，数学，英语，体育，政治，且内容上下左右居中。
html代码：
css3代码：
