4.CSS
4.1.概念
- Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
- 优点：功能强大，且可以将内容展示和样式控制分离，降低了耦合度，同时让分工协作更容易，提高了开发效率
4.2.css的使用
- 内联样式：在标签内使用style属性指定css代码，如：
<div style="color : red ; width : 100px">hello css</div> - 内部样式
- 在head标签内，定义style标签，style标签的标签体内容就是css代码
<style> div{ color:blue; } </style> <div>hello css</div>
- 外部样式
1.定义css资源文件。 2.在head标签内，定义link标签，引入外部的资源文件 <!-- 在a.css文件中--> div{ color:green; } <!-- 在*.html文件中引入 有两种方式(同理，注意相对路径的问题) --> <!-- <link rel="stylesheet" href="css/a.css"> --> <style> @import "css/a.css"; </style> <div>hello css</div> <div>hello css</div>
4.3.选择器
4.3.1.格式：
选择器 { <!--选择器:筛选具有相似特征的元素-->
属性名1:属性值1;
属性名2:属性值2;
...
}
每一对属性需要使用；隔开，最后一对属性可以不加；
4.3.2.分类
- 基础选择器
- id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 语法：
#id属性名{}三种基础选择器中优先级最高
- 语法：
- 类选择器：选择具有相同的class属性值的元素。
- 语法：
.class属性名{}三种基础选择器中优先级其次
- 语法：
- 元素(标签)选择器：选择具有相同标签名称的元素
- 语法：
标签名{}三种基础选择器中优先级最低
- 语法：
- id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 扩展选择器：
- 通配符：选择所有元素
- 语法：
*{}
- 语法：
- 并集选择器：多个选择器适用于此样式
- 语法：
选择器1,选择器2{}
- 语法：
- 子选择器：筛选选择器1元素下的选择器2
- 语法：
选择器1 选择器2{}
- 语法：
- 父选择器：筛选选择器2的父元素选择器1
- 语法：
选择器1 > 选择器2{}
- 语法：
- 属性选择器：选择元素名称，属性名=属性值的元素
- 语法：
标签名称[属性名="属性值"]{}
- 语法：
- 伪类选择器：选择一些元素具有的状态
- 语法：
标签：状态{}- link：初始化的状态
- visited：被访问过的状态
- active：正在访问状态
- hover：鼠标悬浮状态
- 语法：
- 通配符：选择所有元素
- 对于属性冲突的选择器优先级排序
- 行内选择器(标签内定义了style) > id选择器 > 伪类/类 || 属性选择器 > 元素(标签)选择器 > 通配符
- 提升优先级的方法：对于某种样式，如background样式，在后面加上
!improtant强制提升优先级
4.4.CSS常用属性
1. 字体、文本
+ font-size：字体大小
+ color：文本颜色.
+ text-align：对齐方式
+ line-height：行高
2. 背景：background
- 图片做背景：
background: url("img/register_bg.png") no-repeat center;
3. 边框：border：设置边框，复合属性
4. 尺寸- width：宽度
- height：高度
4.5.盒子模型
4.5.1.模型属性及特点
- 控制布局，自内而外可以称为元素内容，内边距，边框，外边距
- background：背景色范围是元素内容+内边距(不包括边框)。
- position：可以设置固定位置，如
position: top; top: 0;固定在顶部。- margin：外边距(参数方式按顺时针方向，上右下左)。
- 参数方式同padding。
- margin：外边距(参数方式按顺时针方向，上右下左)。
- padding：内边距
padding: 30px 10px 30px 10px表示顶部30像素、右侧10像素、底部30像素、左侧10像素padding: 30px 10px表示上下30像素，左右10像素padding-top: 10px表示顶部10像素padding-right: 10px表示右侧10像素padding-bottom: 10px表示底部10像素padding-left: 10px表示左侧10像素- border：边框(必须要加soild语句，否则边框不显示，如
border: 1px soild sliver表示一个1元素大小的银色边框
- content：内容(即自己设置的宽度和高度)
- box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
- float：浮动
- left
- right
主要长宽单位
- px 像素
- % 相对于父元素的大小
- 一些常用的配置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background: red; /* 盒子左右居中 */ margin: 100px auto; /* 盒子里的文字左右居中 */ text-align: center; /* 盒子里的文字行高100px，与盒子大小一样，显示出上下居中效果 */ line-height: 100px; /* 盒子里元素的颜色 */ color: whitesmoke; /* 盒子里的文字大小 */ font-size: 30px; /* 字体粗细 */ font-weight: bold; /* 字体 */ font-family: Arial; } .div2{ width: 100px; height: 100px; background: #ff371a; /* 修改其属性为行内块 */ display: inline-block; /* 居中对齐 */ vertical-align: middle; } .div3{ width: 200px; height: 200px; background: #3aff9d; /* 修改其属性为行内块 */ display: inline-block; /* 居中对齐 */ vertical-align: middle; } </style> </head> <body> <div class="div1"> div </div> <div class="div2"></div> <div class="div3"></div> </body> </html>
4.5.2.盒子模型html标签的嵌套
- html描述结构的方式：使用标签的嵌套
- 子标签/元素最好只占据父/标签元素的内容区域
- 对于下面这个代码，可以看出p标签已经超过了内容(width,heigth)区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; <!-- padding: 100px --> border: 100px solid silver; margin: 100px; background: green; } p{ width: 200px; background: red; } </style> </head> <body> <div> <p>p</p> </div> </body> </html>
4.5.3.盒子模型body标签的嵌套分类
- 块标签：所有的块级标签/元素，在html的显示页面上，都独占一行，如<div>、<p>、<h1> - <h6>、<table>、<tr>以及连续的列表元素
- 可以直接控制宽度、高度以及盒子模型的相关css属性: 块级元素可以设置元素内容大小, 内边距大小, 边框大小, 外边距大小
- 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度，且宽度可以继承
- 在不设置高度的情况下，块级元素的高度是它本身内容的高度，且高度不可继承
- 通常使用块级元素来进行大布局（大结构）的搭建
- 块级元素是指本身默认属性为
display: block的元素，可以重写为行级元素，拥有行级的特点。
- 行标签：对于行级标签/元素，连续的行标签会在一行内连续排列，如<b>、<i>、<a>、<td>
- 不能直接控制宽度、高度以及盒子模型的相关css属性，(但是直接设置内外边距的左右值是可以的): 宽高不会起效果, 内外边距只会左右方向上起效果
- 行级元素不要有边框/内边距/外边距，因为根本没有这样的需求(可以加，但是效果很奇怪，类似bug一样，代码演示如下)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ width: 100px; <!-- 行级元素无效果 --> height: 100px; <!-- 行级元素无效果 --> padding: 100px; <!-- 只有左右方向有效果 --> margin: 100px; <!-- 同 padding 一样只有左右方向，效果会叠加 padding 的大小> border: 5px solid red; <!-- 奇怪的效果:边框超过了hr线而且很大 --> background: green; <!-- 奇怪的效果:背景色超过了hr线而且很大，同边框一样 --> } </style> </head> <body> <hr> <a href="https://www.baidu.com">baidu</a> <a href="https://www.baidu.com">baidu</a> <a href="https://www.baidu.com">baidu</a> <hr> </body> </html>- 行级元素的宽高是由本身内容的大小决定（文字、图片等）: 宽高都不可继承, 只能根据自己元素内容改变
- 行级元素只能容纳文本或者其他内联元素（不要在行级元素中嵌套块级元素，毫无意义）
- 通常使用行级元素来进行文字、小图标（小结构）的搭建。
- 行级元素是指本身默认属性为
display: inline的元素，可以重写为块级元素，拥有块级的特点。
- 行内块：本质属于行元素，可以理解为是一个特殊的行级元素，但是具有一些块级元素的特性。如<img>、<input>、<select>
- 可以与其他行内元素、内联元素共处一行
- 可以设置宽高、内外边距。
- 行内块元素是指本身默认属性为
display: inline-block的元素。
行的高度：由元素内容区域确定
行的宽度：遵从于父元素的元素内容区域宽度
背景色大小一般为元素内容+内边距
子元素一般只会占据父元素的元素内容部分
4.5.4.盒子模型外边距的合并
- 在一个html页面上，两个盒子模型的外边距"紧相邻"，那么这两个盒子模型的外边距会发生合并。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> div{
width: 100px; height: 100px; background: red; margin: 0 0 100px 0; } p{
width: 100px; height: 100px; background: blue; margin: 100px 0 0 0; } </style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
- 打开浏览器开发人员工具，查看盒子模型，会发现，对于两个盒子之间的白***域，是二者共享的，说明发生了合并
- 合并之后的大小取决于大的那个
4.5.5.浮动
- 标准流/标准文档流/ 文档流
- 在一个页面上, 所有的元素/标签, 按照其元素特性(行元素/块元素/行内块), 从左向右, 从上向下, 有序排列, 就是标准文档流
- 浮动特点：
- 浮动只影响后面的元素: 浮动元素脱离了标准文档流, 后面如果想符合标准文档流, 就要把漂浮元素原本占据的空间占据
- 连续浮动一行显示
- 浮动以元素顶部为基准对齐
- 浮动可是实现模式转换: 一般我们让块浮动(用来布局), 让块级元素在一行显示, 可以设置宽高内外边距
- 设置了浮动的元素，使元素脱离标准流（块级元素横向排列等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background: #ff371a; float: left;; } .div2{ width: 200px; height: 200px; background: #34ff68; } .div3{ width: 200px; height: 200px; background: #3748ff; float: left; } </style> </head> <body> <div class="div1"><div> <!-- 非连续浮动块，不会在同一行显示(div3换行了) --> <div class="div2"></div> <div class="div3"></div> <!-- hr线在div3块下边，说明div3确实浮起来了 --> <hr> </body> </html> - 浮动清除
- Clear：谁受影响谁清除
- left：在左侧不允许浮动元素。
- right：在右侧不允许浮动元素。
- both：在左右侧不允许浮动元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1{ width: 100px; height: 100px; background: #ff371a; float: left;; } .div2{ width: 300px; height: 200px; background: #34ff68; /*clear: both;*/ /*clear: left;*/ /*clear: right;*/ clear: both; /*float: left;*/ } </style> </head> <body> <div class="div1"></div> <div class="div1"></div> <div class="div2"></div> </body> </html> - Clear：谁受影响谁清除
4.5.6.溢出隐藏
- 对于大部分项目，前端css代码会在最上边定义所有使用的标签将自带的外边距、内边距设置为0，并且将溢出隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body,div,p{ margin: 0; padding: 0; overflow: hidden; } </style> <body> </body> </html> - overflow属性
- Visible：默认值。内容不会被修剪，会呈现在元素框之外。
- Hidden：内容会被修剪，并且其余内容是不可见的。
- Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- 常用隐藏的css内语句
- display: none 元素隐藏不占位置
- overflow: hidden; 将超出部分的元素隐藏内容
- visibility: hidden; 元素隐藏占位置
京公网安备 11010502036488号