css -001版
css层叠样式表
作用：美化和渲染页面
语法：
选择器{属性：属性值；属性2：属性值； }
例：h 1{ color：red；font-size：20px；}
分类：
- 外部样式表：链接一个外部css文件
< link type=“text/css”rel=“styleSheet”href=“css文件链接地址”>
- 内部样式表：写在单个网页中的
嵌入样式 写在head头部的style标签中
< style>
h 1{ color：red；font-size：20px；}
< /style>
- 行内样式： 写在标签中作为标签属性出现
< h1 style=“color：red；”>< /h1>
优先级：
行内样式 高于 内部样式和外部样式；
内部样式与外部样式谁在下面，是谁；
颜色的一种选择方式
color: rgba(200, 100, 20, 0.7);/r代表红色，g代表绿色，b代表蓝色，a代表透明度/
语法规范
代码风格
装饰线
对齐方式
text-align 水平对齐方式
首行缩进
text-indent 首行缩进
行高和阴影
line-height 行高
盒子里字超出范围时
CSS选择器
1.标记选择器
例如
2.类选择器
类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下。
. 类名称{属性：属性值;属性：属性值；…}
说明
（1）使用类选择器定义的css样式，需要设置元素的class属性值为其指定样式。
（2）类选择器的优势之一是可以为元素定义相同或单独的样式。
例如
3.ID选择器
例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻详情页面</title>
<style>
#box1{
width: 150px;
height: 300px;
border: 1px solid red;
background-color: #333;
float: left;
}
#box2{
width: 150px;
height: 300px;
border: 1px solid rgb(55, 0, 255);
background-color: #690101;
float: left;
}
#box3{
width: 150px;
height: 300px;
border: 1px solid rgb(38, 254, 0);
background-color: #70c4e2;
float: left;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
4.交集选择器
# 5.并集选择器
# 6.后代选择器
# 7.通配符选择器
# css的高级特性
### 1.层叠性
指多种css样式的叠加。
### 2.继承性
指书写css样式代表码时，子标记会继承父标记的某种样式，如文本颜色和字号等。
3.优先级
# 盒子模型
# div
## 盒子的属性
要精确描述盒子的外观，还可以设置盒子的border（边框）、border-radius（圆角边框）、padding（内边距）、margin（外边距）、box-shadow（盒子阴影）和box-sizing（盒子大小）等属性。
**border属性：**
border-top：上边框宽度、样式、颜色
border-right：右边框宽度、样式、颜色
border-bottom：下边框宽度、样式、颜色
border-left：左边框宽度、样式、颜色
**注意：**若4个边框具有相同的宽度、样式和颜色，则可以用一行代码设置。
语法格式： border：边框宽度、样式、颜色
**说明：**边框样式常用的属性值有以下5个。
solid：边框样式为（单）实线
dashed：边框样式为虚线
dotted：边框样式为点线
double：边框样式为双实线
none：没有边框
**border-radius **属性
CSS3中新增的border-radius属性用于给元素设置圆角边框。其基本语法格式如下。
border-radius:圆角半径;
设置圆角半径时，也可以分别为4个角的圆角半径设置不同的值
若对盒子设置了背景颜色或背景图像，则不设置边框时，也可以使用border-radius属性显示出圆角的效果。
**paddding属性**
padding属性用于设置盒子中内容与边框之间的距离，也常称为内边距。其设置方式类似于border属性的设置方式。
具体如下：
padding-top：上内边距大小
padding-right：右内边距大小
padding-bottom：下内边距大小
padding-left：左内边距大小
**注意**：若4个内边距具有相同的大小，则可以用一行代码设置。
语法格式： padding:内边距大小;
**margin属性**
用于设置盒子与盒子之间的距离，也称为外边距。其设置方式类似于padding属性的设置方式。
具体如下:
margin-top：上外边距大小
margin-right：右外边距大小
margin-bottom：下外边距大小
margin-left：左外边距大小
若4个外边距具有相同的大小，则可以用一行代码设置。
语法格式： margin:外边距大小;
**box-shadow属性**
box-shadow属性用于给盒子添加周边阴影效果。语法格式如下。
box-shadow:阴影水平偏移量， 阴影垂直偏移量， 阴影模糊半径 ，阴影扩展半径， 阴影颜色， 阴影类型;
**说明**
1）阴影水平偏移量：必选项，可以为负值，正值表示向右偏移，负值表示向左偏移。
2）阴影垂直偏移量：必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。
3）阴影模糊半径：可选项，不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。
4）阴影扩展半径：可选项，可以为负值，正值表示在所有方向上扩展，负值表示在所有方向上消减，默认值为0。
5）阴影颜色：可选项，省略时为黑色。
6）阴影类型：可选项，内阴影的值为inset，省略时为外阴影。
**box-sizing属性**
box-sizing属性用于设置盒子的width属性和height属性的值是否包含边框和内边距。其设置方式如下。
# 设置背景颜色以及图片
### 设置背景颜色：
**background.color**
### 设置背景图片：
**background-image:url**(图片链接地址)
### 设置背景图像平铺:
**background-repeat:**
* repeat 【背景图像在水平和垂直方向上重复】;
* no-repeat 【背景图像不重复，只显示一次】;
* repeat-x 【背景图像在水平方向上重复】;
* repeat-y 【背景图像在垂直方向上重复】;
* space 【背景图像以相同的间距平铺，直到填满整个容器】;
* round 【背景图像自动缩放，以适应容器的大小，并且不会裁剪图像】;
# 设置背景图片的位置
**background-position:**【关键字/百分比/长度】
* left 【将背景图像的左边缘与容器的左边缘对齐】;
* center 【将背景图像的水平和垂直中心与容器的水平和垂直中心对齐】;
* right【将背景图像的右边缘与容器的右边缘对齐】 ;
* top【将背景图像的上边缘与容器的上边缘对齐】 ;
* bottom 【将背景图像的下边缘与容器的下边缘对齐】;
* left top【将背景图像的左上角与容器的左上角对齐】；
* right bottom【将背景图像的右下角与容器的右下角对齐】；
* center center【将背景图像的中心与容器的中心对齐】；
* background-position: 50% 50%【表示将背景图像的中心与容器的中心对齐】；
* background-position: 0% 0%【将背景图像的左上角与容器的左上角对齐】；
* background-position: 100% 100%【将背景图像的右下角与容器的右下角对齐】；
* background-position: 10px 20px 【表示将背景图像的左上角向右偏移10像素，向下偏移20像素】；
# 设置背景图片固定
**background-attachment:**
* scroll【背景图像会随着页面的滚动而滚动】；
* fixed【背景图像固定在视口中的某个位置，不会随着页面的滚动而滚动】；
* local【背景图像会随着元素内容的滚动而滚动】；
# 设置背景图片的大小
**background-size:**
* 长度【指定背景图像的宽度和高度】；
* 百分比【可以使用百分比值来指定背景图像相对于容器的宽度和高度的比例】；
* auto【背景图像的尺寸将根据其原始尺寸自动调整，以保持其宽高比。这是默认值】；
* cover【背景图像将被缩放，以完全覆盖容器，同时保持其宽高比。如果容器的宽高比与背景图像的宽高比不同，背景图像可能会被裁剪。】；
* contain【背景图像将被缩放，以完全包含在容器内，同时保持其宽高比。如果容器的宽高比与背景图像的宽高比不同，背景图像可能会在容器内留有空白】；
# css元素类型
### 分为块元素【独占一行】和行内元素【不独占一行，只有文本内容的大小】
**块元素**：在页面中以区域块的形式出现
**行内元素**
**span**
### 块元素间的外边距
**块元素间的垂直外边距**：
* margin-bottom【下外边距】
* margin-top【上外边距】
注意：它们的垂直间距不是两者的和，而是两者中的较大者。
**块元素间的水平外边距：**
* margin-right【右外边距】
* margin-left【左外边距】
注意：它们的水平间距是两者之和。
# 元素的浮动
**浮动属性：**
元素的浮动是指设置了浮动（float）属性的元素会脱离标准流的控制，移动到指定位置。在CSS中通过float属性来设置左浮动或右浮动，
其格式如下:选择器 {float: left | right | none;}
* left【元素左浮动，表示元素向左移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止】
* right【元素右浮动，表示元素向右移动，直到它的外边缘碰到父元素或另一个浮动元素的边框为止】
* none【元素不浮动。若不设置float属性，则float属性值默认为none】
**清除浮动**：
使用clear属性清除浮动，
其格式如下：
选择器 {clear: left | right | both;}
* left【清除左侧浮动的影响】
* reight【清除右侧浮动的影响】
* both【同时清除左右侧浮动的影响，最常用】
overflow属性：清除浮动影响，使父元素适应子元素的高度
# 元素的定位
**position**属性用于定义元素的定位方式
语法格式： 选择器{ position: static | relative | absolute | fixed; }
* static【静态定位。始终按照网页文档流进行布局，默认定位方式】
* relative【相对定位，相对于元素在原文档流的位置进行定位】（相对于原来的位置发生偏移）
* absolute【绝对定位，相对于元素上一个已经定位的父元素进行定位，或着body来定位】
* fixed【固定定位，相对于浏览器窗口进行定位】
**边偏移**
* left：定义元素相对于其父元素左边线的距离。
* right：定义元素相对于其父元素右边线的距离。
* top：定义元素相对于其父元素上边线的距离。
* bottom：定义元素相对于其父元素下边线的距离。
**z-index：可以将标签叠加到最上层**
当对多个元素同时设置定位类型时，定位元素之间有可能会发生重叠。要想调整定位元素的堆叠顺序，可以对定位元素应用z-index属性，其取值可为正整数、负整数和0。z-index属性的默认属性值为0，值越大，定位元素在层叠元素中越居上。
# 列表样式
列表有无序列表、有序列表和自定义列表，对应的标记分别是< ul>、< ol>和< dl>。
**list-style-type：**
**list-style-image：url（图片地址）**
**list-style-position：**
# 伪类选择器
**a:link{CSS样式规则;}**：未访问时超链接的状态
**a:visited{CSS样式规则;}**：访问后超链接的状态
**a:hover{CSS样式规则;}**：鼠标指针悬停在其上时超链接的状态
**a:active{CSS样式规则;}**：按下鼠标按键和松开按键之间超链接的状态
# 元素的类型转换
语法格式： 选择器{display: …；}
* block【**设为块元素**】
* inline【**设为行内元素**】
* inline-block【**设为行内块元素**】
* none【**设为元素隐藏，不显示**】
浙公网安备 33010602011771号