CSS零基础入门笔记
1、css样式表
1、什么是css
英文全名：cascading style sheets(百度百科) === cascading style sheet
层叠样式表WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制，简单说就是如何修饰网页信息的显示样式。目前推荐遵循的是W3C发布的CSS3.0.用来表现XHTML或者XML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0
2、css语法
- 每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
- 属性必须放在花括号中，属性与属性值用冒号连接。
- 每条声明用分号结束。
- 当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
- 在书写样式过程中，空格、换行等操作不影响属性显示。
2、三种css引入样式
- 行内样式(内联样式)引入规则：样式写在标签的style属性中行内样式的语法规则:
<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>
-
内嵌[内部]样式引入规则：样式放在head或body标签的style标签中:
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<style>标签在文档头部定义内部样式表；内嵌样式的语法规则:
<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
....
}
</style>
</head>
- 外部样式[链入式]引入规则；一个单独的样式文件,存放我们的样式
链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过 标记将外部样式表文件链接到HTML文
档中。
链入式的语法规则:
<head>
<like href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>
该语法中， <like/> 标记需要放在 <head> 头部标记中，并且必须指定 <like/> 标记的三个属性。如下：
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。
3、样式优先级
(内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式
**注意：**如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
4、标签选择器
- 通过标签名称来选择HTML元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{ //选中所有的div标签
width: 100px;
height: 100px;
color: red; //设置字体颜色
}
p{ //选中所有的p标签
color: blue;
}
</style>
<body>
<div>
div标签
</div>
<p>
p标签
</p>
</body>
</html>
5、id选择器
id 选择器根据元素的 id 属性来选择特定的 HTML 元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{ //选中所有id="box1"的标签
background-color: yellow; //设置背景颜色
}
#box2{
background-color: red;
}
#box3{
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">1111111111</div>
<div id="box2">222222222</div>
<div id="box3">333333333</div>
</body>
</html>
6、类选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.huashan{
color:red;
background-color: yellow;
}
.ibm{
background-color: blue;
}
</style>
</head>
<body>
<div>1111</div>
<div class=" ibm huashan">2222</div> //一个标签中可以写多个类
<div class="ibm">33333</div>
<div class="ibm">44444</div>
<div>5555</div>
<div>6666</div>
</body>
</html>
7、通配符选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
*{
margin: 0;
padding:0 ;
}
8、群组选择器
中间用（,）隔开，可一次选中多个HTML元素。
div,p,h1{
background-color: yellow;
}
div,.boxp,h1{ //选中多个标签
background-color: yellow;
}
/* 群组选择器：提出公共代码，节约代码量 */
9、后代选择器
后代选择器用于选取某元素的后代元素。
div p {
background-color: yellow;
}
10、其他选择器
-
子元素选择器
选中某一元素的所有后代元素：
div > p {
background-color: red;
}
-
相邻兄弟元素选择器
选中某一元素后的第一个兄弟元素
div + p {
background-color: green;
}
-
后续兄弟选择器
选择某一元素后的所有兄弟元素
div ~ p {
background-color: orange;
}
11、display隐藏元素
visibility:hidden; 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，
但仍然会影响布局。
display:none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用
的空间也会从页面布局中消失。
12、伪元素
伪元素用于设置元素指定部分的样式。
例如，它可用于：
-
设置元素的首字母、首行的样式
-
在元素的内容之前或之后插入内容
语法：
- ::before在元素内容之前插入
h1::before {
content: url('img/smiley.png');
vertical-align: middle;
margin-right: 12px;
}
- ::after在元素内容之后插入
用伪元素清除浮动（常用）
在元素最后面插入一个空白内容，并清除浮动且设置成块级元素。
语法：
.box::after{
content: ''; //和伪元素搭配使用，必写
display: block;
clear: both;
}
13、清除浮动的方式
-
给父级元素单独定义高度（height）
-
在标签结尾处（前）加空div标签，
clear:both -
伪元素清除（同2中的伪元素）
-
父级div定义
overflow:hidden
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
- 父级div定义
overflow:auto
缺点：内部宽高超过父级div时，会出现滚动条
14、渐变
14.1、概述
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
14.2、线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设 置一个起点和一个方向（或一个角度）。（一个方向到另一个方向渐变）
语法：
background-image: linear-gradient(direction/degree,color-stop1 占比, color-stop2 占比, ...);
- **direction（方向）😗*to left 、to right 、to top、to bottom、to top right…/degree(角度)：(0~360)deg(顺时针)
14.3、径向渐变
径向渐变由它的中心定义。 为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以 指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状 是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法：
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
-
**shape(形状)：**elipse 椭圆（默认） circle 圆形。注：在正方形中两者效果相同
-
**size(大小)：**即渐变到哪里停止
- closest-side:圆心到距离最近的边
- farthest-side:圆心到距离最远的边
- closest-corner：圆心到距离最近的角
- farthest-corner：圆心到距离最远的角
-
**position(渐变中心点位置)😗*默认在正中间，60% 50%=>(距离左边、上边的距离)。
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow...)
14.4、重复渐变
重复某一渐变过程。
在线性渐变或径向渐变前加上repeating-
14.5、透明度
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。 为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定 义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
15、阴影
15.1、盒子阴影
语法：
box-shadow:水平位移 垂直位移 模糊程度 阴影大小 颜色 内/外侧阴影（默认外侧，inset内侧）
15.2文本阴影
语法：
text-shadow:水平位移 垂直位移 模糊程度 颜色
16、媒体查询
使用媒体查询的一种方法是在样式表内有一个备用的 CSS 部分。
语法：
min-width、max-width
@media screen and (min-width: 480px) {
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
