一、网页的几种表现形式
- 视图层(html层)
- 表现层(css层)
- 行为层(js)
二、表现层(css :层叠样式表)
1. css作用:
- 对html元素的位置和精确计算像素,外观,字体等等,
2. css特点:
- 丰富的样式定义 - 易于使用和修改 - 多页面使用 - 可层叠(一个元素可具有多个css样式) - 页面压缩 (尽量多次复用同样的css,减小css文件体积,提高网页 性能)
3. css样式属性写法**:
属性:值;
三、css几种使用方式:
- 元素设置宽高的时候 块级元素可设,行级元素设置宽高属性是无效的。
1.行内样式
- 在元素标签上的style属性上直接写css
- 在浏览器上的位置在
element(元素).style { background: red; }
2.内嵌样式
- 在网页里面任意位置(head/body标签之内去写< style >内部写css< /style>)
<style type="text/css"> type="text/css" 可以省略不写 </style>
- 内嵌样式的写法
ele{ }
- 编译之后格式:
* { (有当前页面多少行代码) border: 1px solid red; }
3.外部样式表
- css写在外部的css文件里面,网页直接调用使用
- 样式分为:单属性样式和复合属性样式
- 复合属性
background: red url('./image/0.jpg') no-repeat 0 0; border:1px solid red; 复合上面不能写size,大小只能分开写
- 单属性
background-color: #f9fdff; 设置背景颜色 background-image:url('./image/0.jpg'); 设置背景图片 background-size:cover; 设置背景图片大小,cover auto background-repeat: no-repeat; 设置图片是否平铺 background-position:50px; background-position-x: 50px; background-position-y: 50px; border-left: 1px solid red; border-top:1px solid blue; border-bottom:1px solid orange; border-right: 1px solid pink; border-left-width:10px; border-left-style: dashed; border-left-color: blue;
- [1]背景属性
- 加了背景图片时就不需要再设置背景颜色了,因为背景图片会覆盖背景颜色,设置也是无效的。
background-size: cover(整张覆盖) auto(自动 默认) contain(包含) >percentage(设置百分比) length(设置宽高) background-size: 50px 设置宽高都为50px background-size: 50px 100px 设置宽为50px,高为100px background-repeat: no-repeat 设置背景图片不平铺 background-repeat: repeat-x 设置背景图片横向平铺 background-repeat: repeat-y 设置背景图片纵向平铺 background-position: 0 0 背景图片的坐标 background-position-x: 50 图片到左边的距离为50 background-position-y: 50 图片到上边的距离为50
- [2] 字体属性
font-size:设置文字大小,浏览器默认字体是14px, 这个用css默认的值 font-family:设置字体,css默认的有几个字体,也可以自己 自定义字体,但是需要自己导入字体文件:@font-face
四、内嵌样式里面的css选择器
- head和body里面都可以进行内嵌
- 先定位到当前元素,再写css
- css 注释 ctrl+shift+/
五、css选择器
1. *匹配器:匹配当前网页里面的所有元素
2. 元素匹配器**:根据当前元素的名称来匹配
3. class类名称匹配器**:根据元素的class属性名称来匹配,用点来匹配 元素种的一部分 (一个元素可能同时具有多个类)
<button class="btn btnsub">按钮</button> <button>按钮</button> <button class="btn">按钮</button> <div class="btn"> 我是div </div>
4. id名称匹配器**: 根据当前元素的id属性来匹配(一个元素一个,不重名) 使用#来选择
#userID{ width: 200px; height: 30px; } (id可以重复,建议不这写)
六、组合选择器
1. 子父关系选择器**:
- 空格选择器
ul li{ color: red; }
- 备注:空格选择器:指匹配当前元素里面的所有后代元素
2. >选择器**
#menu>li{ border: 1px solid red; }
- 备注:>选择器:指匹配当前元素里面的直接子元素
- 写的时候也可以根据元素区分class和id
button.navinfo{ border: 1px solid blue; color: red; } ul#menu{ }
3. 相邻元素选择器**
- +(匹配当前元素之后紧跟的元素)
- ~(匹配当前元素之后的所有元素) 指的是同级元素匹配
.p1+p{ color: red; } .p1~p{ color: red; } <div class="box"> <p class="p1">p1</p> <span>我是span标签</span> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>
七、子集选择器(css2里面的伪类选择器)
- [1] 里面的数字是按照序号数
.box>p:nth-child(1){ }
- [2] 下面这两个选择器直接找的是子集里面的第一个或者最后一个
.box>p:first-child{ color: red; } .box>p:last-child{ color: red; } <div class="box"> <p class="p1">p1</p> <span>我是span标签</span> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>
- [3] 上面这三个伪类选择器 可以直接写元素匹配
p:first-child{ color: red; } p:last-child{ color: red; } p:nth-child(3){ color: red; } <div class="box"> <p class="p1">p1</p> <span>我是span标签</span> <p>p2</p> <p>p3</p> <p>p4</p> <p>p5</p> </div>
八、属性选择器
- [1] 根据元素的属性去匹配元素
- 写法是:匹配器[属性]{}
button[type]{ color: red; }
- [2] 多个属性匹配
button[type][class]{ color: red; }
- [3] 根据属性值来匹配
button[class=info][type=button]{ color: red; }
- [4] 根据属性值来匹配: 值是以谁开头或者以谁结尾,包含那个字母
button[class^=a]{ (以a开头) color: red; } button[class$=m]{ (以m结尾) color: red; } button[class*=f]{ (包含f) color: red; }
九、分组选择器
button,p,span{ color: red; } .btn,#id,button{ } div>#menu,ul>li.info{ }
十、外部样式
- [1] 在外部建立css文件,引入到网页里面
- [2] 引入位置在heade或者body里面都可以
- [3] 外部样式的写法和内嵌样式的写法一致(都是选择器)
- 引入方式:
<link rel="stylesheet" href="./css/index.css" type="text/css"/>
- rel=“stylesheet” ---------css的解析方式
- href="./css/index.css"-------------解析路径
- type=“text/css” ------- 可以省略不写
十一、css三大样式之间的优先级
1.优先级:
- [1] 三大样式之间如果存在冲突:行内样式>内嵌样式>外部样式(行内样式>外部样式>内嵌样式)-----------跟加载css的顺序就有关
- [2] 三大样式之间如果样式不冲突,则叠加
2. 选择器之间的优先级(内嵌、外部样式存在)
- [1] 四个基本选择器之间的优先级: id>class>ele>*
- [1] 组合选择器里面的优先级:
- 如果是用元素匹配器在写,那么子父关系里面元素匹配器的优先级大于自身的优先级;
- 元素匹配器里,如果只是元素在写,那么优先级就是它自身的类大;
- 如果是带父级,子父关系组合里面的类的优先级一定比自身的优先级大
- id比这些的优先级都大,但是子父关系里面的id会大于id的优先级
- 同元素、同名称,如果牵扯到组合的,组合的优先级一定大于它自身的优先级
- 同匹配方案 牵扯到父级(父级的优先级高)
- 提高样式优先级:!important 提高的比行内样式优先级还高
十二、css里面的盒子模型
- [1] 作用:用来设计和布局的时候使用
- [2] 包括:边距 边框 填充 实际内容
- [3] 一个简单的元素就可以构成盒子模型
- [4] 浏览器给网页body元素默认一个margin外间距值 8px
- 一般加入:
*{ margin: 0; padding: 0; }
- [5] 外间距属性写法:
margin-left: 50px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin: 0 10px 20px 30px;(上、右、下、左) margin: 0px10px 20px;(上、左右、下) margin: 0px 10px;(上下、左右) margin:0;(上下左右)
- [6] 内间距属性写法:
padding-left: 20px; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding: 0 10px 20px 30px;(上、右、下、左) padding:0px 10px 20px;(上、左右、下) padding: 0px 10px;(上下、左右) padding:0;(上下左右)
- [7] 盒子格式
box-sizing: content-box; 正常的盒子模型是往外走,内容区域不变,把盒子撑大 box-sizing: box-sizing: border-box 盒子往里面陷,内容区域变小,盒子大小不变
- [8] css样式属性值里面inherit
当前元素的这个属性值继承父元素的这个属性值.box>span{ display: inherit; }
- [9] css里面块级元素和行级元素相互转化
- 使用display:block;(转化块级)
- display:inline-block;(转化行级块:转化为块级元素,但是他不换行)
- display:inline;(转化行级)
- 两个盒子上下放置,设置外间距:两个容器间的间距不会叠加,而是取两个里面间距的最大值
- 如果是两个行级块,那么他们之间的外间距会叠加
- [10] BFC:是指元素相对独立,自身的结构和位置不会影响周边元素
- 参考文档
- https://blog.csdn.net/sinat_36422236/article/details/88763187,
- https://zhuanlan.zhihu.com/p/25321647
- [11] 只要元素满足下面任一条件即可触发 BFC 特性:
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
- [11] 普通流的BFC:
- 块元素上下结构如果属域同一个BFC,这两个元素之间的外间距会重叠
如果将另一个元素用其他元素包裹设置父元素样式 overflow: hidden;
会构建为另一个BFC,这样的两个上下元素之间的间距会叠加 不会重叠
十三、css里面的伪类
- [1] :hover 悬停伪类
- [2] :active 激活伪类
- [3] :checked 选择伪类 主要使用 radio checkbox
- [4] :focus 获得焦点伪类 input表单元素
- [5] 一般使用下面这两个伪类来做css特效
- [6] :after 给元素的内容之后追加内容
- [7] :before 给元素的内容之前追加内容
a:hover{ color: blue; } a:active{ color: orange; } .ckbox:checked+span{ color: red; } .idcard:focus{ color: red; }
- [8] 下面这两个是可用和不可用的伪类,表单元素添加disabled 为不可用,不添加可用
input:disabled{ color: blue; } input:enabled{ color: green; } .fontbox:after{ content: ""; } .fontbox:before{ content: ""; }
十四、css里面的尺寸
- [1] width height max-width min-width max-height min-height line-height
- [2] line-height: 100px:属性设置一行的高度 如果是单行文本,当line-height的值与height的值相同时,可以做单行文本相对父容器垂直居中。
十五、css里面的文本对齐方式
- text-align:left center right inherit
十六、css里面的像素单位
- [1] px(固定单位像素) rem em %(百分比 相对父容器走百分比)
- [2] rem 相对根节点 如果给html设置字体大小16px 1rem =16px;
- [3] em 相对像素 如果父元素没有设置字体大小,相对浏览器走默认像
- (如果父容器设置字体大小, 相对父容的字体大小)
十七、input表单元素的轮廓
input { outline: none; -------------------去掉轮廓 outline-color: red;---------------设置轮廓颜色 outline-width: 2px;--------------设置轮廓宽度 outline-style: dashed;----------设置轮廓样式 outline-offset: 10px;------------设置轮廓偏移 }
十八、盒子超出隐藏属性