本文详细介绍了CSS（级联样式表）的基础知识，包括选择器（标签选择器、id选择器、class选择器）、样式表的类型（内联、内嵌、外部）、颜色和尺寸设置、内边距与外边距的使用、元素定位、溢出处理和不透明度调节。同时，讲解了伪类和伪元素的概念及其在链接样式和文本修饰中的应用。内容深入浅出，适合初学者学习。
cSs学习总结
一.什么是cSs
CSS是级联样式表（Cascading Style Sheets）的缩写，用于对页面进行布局和美化。
在CSS中可以设置HTML标签的位置、距离、颜色、大小、浮动、透明度等
二.选择器
一条CSS样式由两部分组成：选择器，以{}包裹的一条或多条声明（声明是对象需要改变的具体样式），而CSS正是通过选择器对不同的HTML标签进行控制，从而实现各种效果。
选择器是需要改变样式的对象，有三种：标签选择器，id选择器，class选择器
1.标签选择器： 标签选择器前无符号，直接写对应HTML标签的标签符号，标签选择器的适用范围为所有的同种标签，如所有“h1”标签，所有“p”标签等等，因此标签选择器使用得较少。
HTML网页是由很多标签组成的，例如图像标签img、超链接标签a、表格标签table，CSS标签选择器就是声明页面中哪些标签使用哪些CSS样式。
例如设置a标签的字体和颜色样式风格：
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
<style>
a{
font-size: 20px;
color: #F93;
}
</style>
</head>
<body>
<a href="">标签选择器</a>
</body>
</html>
2.id选择器： id选择器是通过HTML页面中的id属性来选择增添样式，与类别选择器基本相同，但是由于HTML页面中不能包含两个相同点的id标记，因此定义的id选择器也就只能被使用一次。命名id选择器要以"#"开头，后面加HTML标记中的id属性值。例如设置p标签的样式：
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
<style>
#one{
font-size: 18px;
}
#two{
font-size: 24px;
}
#three{
font-size: 36px;
}
</style>
</head>
<body>
<p id="one">ID选择器</p>
<p id="two">ID选择器</p>
<p id="three">ID选择器</p>
</body>
</html>
3.class选择器：类别选择器的名称由用户自己定义，并以"."号开头，要应用类别选择器的HTML标签，只需使用class属性来声明即可。id选择器的适用范围为含有相同class的所有元素，class选择器使用得较为普遍。例如设置h标签的字体样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
<style>
.one{
font-family: "宋体";
font-size: 24px;
color: red;
}
.two{
font-family: "宋体";
font-size: 16px;
color: blue;
}
</style>
</head>
<body>
<h2 class="one">类别选择器one</h2>
<p>正文内容</p>
<h2 class="two">类别选择器two</h2>
<p>正文内容</p>
</body>
</html>
三.样式表（CSS）
CSS即层叠样式表（英语：Cascading Style Sheets，又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。
1.内联样式表
在标签中直接添加style
<h3 style="color:green;">I am a heading</h3>
2.内嵌样式表
将样式放在html文件中，较少采用该方法.
在head中引入style标签，即可在上style标签中书写css样式.
用该方法编写的css样式只有在当前html文件中才可以生效，无法被其他html文件共用.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
</style>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还是有点丑：)</p>
</body>
</html>
3.外部样式表
即css样式表，需要新建一个css文件，用来放样式表。如果在html文件中调用样式表，需在html文件中点击 右键→CSS样式→附加样式表。（一般用link连接方式）
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>我是有样式的</h1>
<hr>
<p class="haha">还行：)</p>
</body>
</html>
建立一个样式表文件mycss.css，后缀为.css
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
四.设置颜色和尺寸
css中常用的表示颜色的方法：
1.网页的预定义色，使用英文单词进行颜色表示，如red，blue等
2.颜色RGB16进制值，如#ff0000
3.RGB三原色,如RGB(255,0,0)
4.RGB，使用百分号表示，如RGB(100%,0%,0%)
背景颜色：background-color:red;
字体颜色：color:red;
用height和width设定元素内容占据的尺寸。
常见的尺寸单位有：像素px，百分比%等。
如：
新建html文件：
```css
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">
这个元素高 200 pixels，占据全部宽度
</div>
<div class="example-2">
这个元素宽200像素,高300像素
</div>
</body>
</html>
建立对应的ccs文件：
.example-1 {
width: 100%;
height: 200px;
background-color: powderblue;
text-align: center;
}
.example-2 {
height: 100px;
width: 500px;
background-color: rgb(73, 138, 60);
text-align: right;
}
五.内边距
内边距也被称为填充，用来定义元素边框与元素内容之间的宽度，用padding来表示。该空间可设置填充颜色，若内边距被清楚，所释放的空间将由背景颜色填充。
内边距可以统一设置四个边的宽度，也可以单独设置每条边的宽度。
统一设置内边距宽度时不同参数代表的含义：
一个参数：四个方向的内边距均相等；
两个参数：第一个参数表示上下两个方向的内边距宽度，第二个参数表示左右两个方向的内边距宽度；
三个参数：第一个参数表示上面一个方向的内边距宽度，第二个参数表示左右两个方向的内边距宽度，第三个参数表示下面一个方向的内边距宽度；
四个参数：第一个参数表示上面一个方向的内边距宽度，第二个参数表示右面一个方向的内边距宽度，第三个参数表示下面一个方向的内边距宽度，第四个参数表示左面一个方向的内边距宽度。（沿顺时针方向）
padding:5px;//四个方向的内边距都是5px
padding:5px 10px;//上内边距是5px，左右内边距是10px
padding:5px 10px 15px;//上内边距是5px，左右内边距是10px，下内边距是15px
padding:5px 10px 15px 20px;//上内边距是5px，右内边距是10px，下内边距是15px,左内边距是20px
单独设置内边距宽度：
padding-top:10px;//上内边距为10px
padding-bottom:10px;//下内边距为10px
padding-right:10px;//右内边距为10px
padding-left:10px;//左内边距为10px
六.外边距
外边距用来定义元素边框与其他元素边框之间的距离，用margin来表示。margin没有背景颜色，是完全透明度。
与内边距相似，外边距可以统一设置外边距宽度，也可以单独设置外边距宽度
统一设置外边距宽度时不同参数代表的含义：
一个参数：四个方向的外边距均相等；
两个参数：第一个参数表示上下两个方向的外边距宽度，第二个参数表示左右两个方向的外边距宽度；
三个参数：第一个参数表示上面一个方向的外边距宽度，第二个参数表示左右两个方向的外边距宽度，第三个参数表示下面一个方向的外边距宽度；
四个参数：第一个参数表示上面一个方向的外边距宽度，第二个参数表示右面一个方向的外边距宽度，第三个参数表示下面一个方向的外边距宽度，第四个参数表示左面一个方向的外边距宽度。（沿顺时针方向）
margin:5px;//四个方向的外边距都是5px
margin:5px 10px;//上外边距是5px，左右外边距是10px
margin:5px 10px 15px;//上外边距是5px，左右外边距是10px，下外边距是15px
margin:5px 10px 15px 20px;//上外边距是5px，右外边距是10px，下外边距是15px,左外边距是20px
单独设置外边距宽度：
margin-top:10px;//上外边距为10px
margin-bottom:10px;//下外边距为10px
margin-right:10px;//右外边距为10px
margin-left:10px;//左外边距为10px
七.定位
元素的定位用position属性来表示，该属性有四个属性值，分别是：static 静态，relative 相对，fixed 固定，absolute 绝对.
static 静态
设置静态定位position：static
该定位是元素的默认定位方式
元素按从上到下，从左到右的方式排列
relative 相对
设置相对定位position：relative
该定位把元素相对于它的静态（正常）位置进行偏移，但是该元素原本所占的空间不会改变
即该元素的所占的空间不变，只是显示的位置发生偏移，元素原本所在的位置不会被其他元素占用。
也即相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
元素内容有四个移动方向：top,bottom,left,right，
移动的单位是px
移动的距离可以为正，亦可以为负。
top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
right：距离为正时表示内容向左移动，距离为负时表示内容想右移动
fixed 固定
设置固定定位：position：fixed；
元素使用该定位后，位置固定不动，即使滚动窗口，元素的位置也不会改变
该定位是相对于浏览器窗口进行定位，
即使用该定位后，元素就固定在屏幕上的某个位置，不会随着页面的滚动而移动。
该定位也是使用top，bottom，left，right这四个属性进行定位，定位方式与上一个定位方式类似，只是相对于浏览器屏幕进行移动。
移动的单位是px
移动的距离可以为正，亦可以为负。
top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
right：距离为正时表示内容向左移动，距离为负时表示内容想右移动
注意：fixed定位的元素不占据空间，即fixed定位的元素与其他元素重叠。
absolute 绝对
设置绝对定位position：absolute；
绝对定位是相对于距离最近且设置了非static定位的父元素进行偏移，若没有父元素定义了非static定位，则相对于整个html进行偏移。
absolute定位也是使用top，bottom，left，right这四个属性进行定位，定位方式与相对定位方式类似，只是相对于有非static定位的父元素进行偏移
移动的单位是px
移动的距离可以为正，亦可以为负。
top：距离为正时表示内容向下移动，距离为负时表示内容想上移动
bottom：距离为正时表示内容向上移动，距离为负时表示内容想下移动
left：距离为正时表示内容向右移动，距离为负时表示内容想左移动
right：距离为正时表示内容向左移动，距离为负时表示内容想右移动
注意：absolute定位的元素不占据空间，即absolute定位的元素与其他元素重叠。
八.溢出
当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：
visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条
提示：还可以通过overflow-x和overflow-y单独设置左右方向和上下方向的滚动条。
九.不透明度
元素的不透明度可以用opacity属性来设置，opacity属性的值在[0.0～1.0]之间，值越低，透明度越高
不透明度的设置常用于图片
opacity:0;
opacity:0.2;
opacity:0.5;
opacity:0.7;
opacity:1;
十.伪类和伪元素
伪类或伪元素用于定义元素的某种特定的状态或位置等。
比如：
1.鼠标移到某元素上变换背景颜色
2.超链接访问前后访问后样式不同
3.离开必须填写的输入框时出现红色的外框进行警示
4.保证段落的第一行加粗，其它正常
/* 选择器 : 伪类/伪元素{属性：属性值} */
selector:pseudo-class/pseudo-element {
property:value;
}
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
/* 鼠标移到段落则改变背景颜色 */
p:hover {background-color: rgb(226, 43, 144);}
p:first-line{color:blue;} /* 段落的第一行显示蓝色 */
p:first-letter{font-size: xx-large;} /* 段落的第一个字超大 */
h1:before { content:url(smiley.gif); } /* 在每个一级标题前插入该图片 */
h1:after { content:url(smiley.gif); } /* 在每个一级标题后插入该图片 */
伪类
anchor伪类
anchor伪类可以用来设置链接不同状态的显示方式
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
first-child伪类
first-child伪类用来选择父元素的第一个子元素
匹配任意元素的第一个元素为p元素的p元素
即该p元素必须是第一个子元素
p:first-child
{
color:blue;
}
匹配所有p元素中的第一个i元素
p>i:first-child
{
color:blue;
}
匹配任意元素的第一个子元素为p元素中的所有i元素
即任意元素中，若p元素为该元素的第一个子元素，则匹配该p元素中的所有i元素
p:first-child i
{
color:blue;
}
伪元素
:first-line伪元素
first-line伪元素用于为文本的首行设置特殊样式
p:first-line
{
color:ff0000;
}
注意：“first-line” 伪元素只能用于块级元素。
:first-letter伪元素
first-letter伪元素用于向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
}
注意： “first-letter” 伪元素只能用于块级元素。
:before伪元素
before伪元素可以在元素的内容前面插入新内容
h1:before
{
content:url(smiley.gif);
}
:after伪元素
after伪元素可以在元素的内容之后插入新内容
h1:after
{
content:url(smiley.gif);
}
扫一扫
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
