CSS总结
前言
最近几天初步学习了CSS，针对CSS部分知识点在此进行一些总结。
1，什么是CSS？
CSS是Cascading Style Sheets的简称 中文称层叠样式表
- 问：CSS是用来做什么的？
- 答：CSS主要用来设计网页的样式，美化网页。
2，怎么引入CSS？
CSS有四种引入方式分别是
- 行内式
- 嵌入式
- 链接式
- 导入式
- 行内式
行内式是在行内直接设置元素的style属性
例
<div style="这里写样式">hello</div>
- 嵌入式
嵌入式是把css样式写在网页head元素的标签中
例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
这里写样式
</style>
</head>
- 链接式
链接式将一个外部*.css文件引入到HTML文件中。（最常用）
例
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
- 导入式
将一个独立的.css文件引入到HTML文件中，写在style标签中。先加载网页，再加载CSS文件
例
<style type="text/css">
<link href="My.css" rel="stylesheet" type="text/css">
</style>
样式的应用顺序：
- 行内式优先级最高
- 针对相同的样式属性，不同的样式属性将以合并的方式呈现
- 相同样式并且相同属性，呈现方式将会按顺序顺序决定，后面会覆盖前面属性
- !important 指定样式最优先
3，选择器
基本选择器：
1、通配符选择器
* 表示选择所有的标签。
*{margin:0;padding:0;}
2、标签选择器
标签选择器，选择所有使用某标签的元素
div {color:green;}
3、类选择器
选择所有class属性中包含info的元素。
.info{color:blue;}
4、id选择器
选择所有id属性等于myid的元素 在一个网页中id的值都是唯一的
#myid {color: yellow}
此外还有组合选择器，后代元素选择器，伪类选择器等等
4，CSS中的常用属性
- 颜色属性
<div style="color:blue">（单词，使用方式：color:blue）</div>
<div style="color:#ffffff">（十六进制色：color: #FFFF00 --> 缩写：#FF0）</div>
<div style="color:rgb(255,255,255)">RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）</div>
<div style="color:rgba(255,255,255,0.5)">（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）</div>
- 字体属性:
font-size: 14px 设置字体大小 可以非常大 不能非常小
font-family:A,B,C,D 设置字体类型
font-weight: normal bold bolder 100 200 300 设置字体是否加粗
font-style: normal italic 设置字体是否倾斜
font: 复合属性
font:font-style font-weight font-size/line-height
color:blue 设置字体颜色
- 文本属性:
text-decoration: none 默认/underline 下划线/overline 上划线/line-through 中线 文本的装饰线
line-height: 100px; 设置行高
vertical-align: baseline;文本所在行高的垂直对齐方式 只对行内元素有效，对块级元素无效
text-indent: 2em; 首行缩进
letter-spacing: ; 字间距
word-spacing: ; 词间距
text-overflow: ; 文本溢出样式
word-wrap: ; 自动换行
等等
- 背景属性:
background-color: blue; 设置背景颜色
background-image: url('x.jpg'); 设置图像为背景
background-repeat: no-repeat(不平铺);(repeat:平铺)
background-position: x轴 y轴;设置背景图像的位置坐标
background: x px y px no-repeat blue url('x.jpg') 综合设置
- 列表属性:
list-style: decimal-leading-zero;
list-style: none; 去除标志
list-style: circle; 空心圆
list-style: upper-alpha; 实心圆
list-style: disc; 实心圆
- display属性:
display:none ; 不显示
display:block; 显示为块级元素
display:inline; 显示为内联元素
display:inline-block; 行内块元素
display:list-item; 显示为列表元素。
- 边框属性:
border-style: solid; solid实线 dashed虚线
border-color: red;
border-width: 1px;
border: 1px solid red ;
border-radius：; 圆角
5，盒模型
- padding:用于控制内容与边框之间的距离;
- margin:用于控制元素与元素之间的距离;
- Border:围绕在内边距和内容外的边框;
- Content:盒子的内容。
padding、margin 表示上右下左都应用
padding-top、margin-top 上
padding-right、margin-right 右
padding-bottom、margin-bottom 下
padding-left、margin-left 左
- 关于padding,margin参数个数问题
一个参数，应用于四边。
两个参数，第一个用于上、下，第二个用于左、右。
三个参数，第一个用于上，第二个用于左、右，第三个用于下。
四个参数，第一个用于上，第二个用于右，第三个用于下，第四个用于左。
6，float属性
-
问：什么是float属性？
-
答: 浮动的初衷是为了实现字围效果，后来常用于块级元素和行内元素在文档流中排列。
-
问：什么是文档流？
-
答: 元素在排版布局过程中，元素自动从左往右，从上往下进行流式排列。
float:none; 不浮动
float:left; 左浮动
float:right; 右浮动
浮动的特点：
- 如果两个元素向同一方向浮动，那么这两个元素会紧紧贴在一起。
- 如果是一个块级元素在没有设置宽度的情况下，浮动时他的宽度会尽可能小。
- 如果一个元素内部所有元素浮动，父级元素在没有设置高度的情况下会导致父元素塌陷。
- 如果一个行内元素浮动了，就会变成块级元素。
元素浮动的影响：
元素浮动会对父级元素以及后面的兄弟元素造成影响。
清除浮动对父级元素的影响
- overflow:hidden
- 给父级元素加一个高度。
清除浮动对后面兄弟元素的影响
clear: left/right/both;
clear只能卸载第一个受影响的元素上面，不能写在父级元素上。
扫一扫
218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
