本文最后更新于：2 个月前
CSS基础
CSS可以控制如内容的字体、颜色、大小和间距这些。一条CSS的样式定义包括属性和属性值，他们共同决定网页的外观
1
2
3
4
5
6
7
|
p {
color: yellow;
background-color: black；
}
|
CSS基础语法
基本语法
由选择器指定CSS作用的对象，在一对大括号{ }内写一条或多条生命，声明由属性和属性值构成
1
2
3
4
5
| selector {
declaration1：value1;
declaration2：value2;
...
}
|
CSS选择器的概念
CSS选择器，是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。
-
通配选择器，由一个星号*代指它选中了文章的所有内容
-
类型选择器，也叫标签名选择器或者是元素选择器，它在文档中选择了一个HTML标签/元素
-
类选择器，以一个句点.开头，会选择文档中应用了这个类的所有元素。
-
id选择器，开头为#而非句点，不过基本上和类选择器是同种用法。一个ID一般用到一次，虽然用多次也能正常显示，但是通过Javascript通过id控制元素就会发生错误。
层叠是CSS的一个基本特征，意为多个选择符之间具有特定的优先级，它是一个定义了如何合并来自多个源的属性值的算法。
1
2
3
4
5
6
7
| p {
color: red;
}
p {
color: blue;
}
|
段落最后颜色是蓝色，因为后面的样式会覆盖前面的样式
这是在同样优先级的情况下，如果在优先级不同的情况下呢？
1
2
3
4
5
6
7
| .special {
color: red;
}
p{
color: black;
}
|
类选择器比元素选择器的优先级高，这次段落颜色将会变红，即使它是前面的样式。
所以，在同优先级的情况下，后定义的生效，不同级则优先级高的生效。各优先级关系，一般来说，选择器的优先级，范围越小，优先级越高。
id选择器 > 类选择器 > 元素选择器 > 通配符选择器
CSS基本样式
常用样式：
-
font-size: 字体大小 px
1
2
| font-weight: normal; //字体粗细
font-style: italic; //字体倾斜
|
-
text-align: center文本对齐
1
2
3
4
5
6
7
8
9
10
11
| text-decoration: none; //无装饰
text-decoration: overline; //上划线
text-decoration: line-through; //中划线
text-decoration: underline; //下划线
text-transform: uppercase; //文本转换，全部换为大写字母
text-indent: 50px; //首行缩进
letter-spacing: 3px; //字母间距
word-spacing: 10px; //单词间距
line-height: 0.8; //行间距
white-space: nowrap; //禁用html框中文字编辑时的换行符（不必懂）
text-shadow: 2px 2px 5px red; //分别是文本的水平、垂直阴影以及阴影的模糊效果、阴影颜色
|
-
color: 字体颜色
-
background: 背景样式
1
2
3
4
5
6
7
8
9
| background-color: blue; //颜色名称方式
background-color: rgb(255, 0, 0); //RGB方式
background-color: #ff0000; //十六进制方式
background-image: url("bg.png") ; //设置背景图片
background-size: contain/cover; // 图片相对于盒子的尺寸
background-repeat: repeat-x; //沿x方向阵列
background-position: right top; //设置背景图片初始位置
background-attachment: fixed; //背景图片是否随网页滑动
background: #ffffff url("tree.png") no-repeat right top;//简写形式
|
-
height,weight,margin,padding,border
1
2
3
4
5
6
7
8
9
10
11
12
| div {
width: 300px;
border-style: solid; // 边框样式
border-color: #ccc; // 边框颜色
border-width: 15px; // 边框宽度
border-radius: 5px; // 允许你设置元素的外边框圆角,该属性是将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
border: 15px solid green; //边框粗细 实线 颜色 ，dotted是点线，double是双线，dashed是虚线
padding: 50px;
margin: 20px;
}
//height: 200px; 设置内容的高度
//width: 50%; 设置内容的宽度
|
-
outline-style: 轮廓样式
1
2
3
4
5
| outline-color: red; //轮廓颜色
outline-style: dotted; //轮廓样式
outline-width: thin; 轮廓宽度
outline: 5px solid yellow; 简写轮廓属性
outline-offset: 25px;//轮廓偏移
|
轮廓（outline）和边框（border）的区别：
-
border可应用于几乎所有有形的html元素，而outline是针对链接、表单控件等元素设计
-
outline的效果将随元素的focus而自动出现（除非手动设置outline-style），相应的由blur而自动消失。这些都是浏览器的默认行为，无需Javascript配合CSS来控制
-
outline是不占空间的，不会像border那样影响元素的尺寸或位置，也不会增加额外的width或者height
-
对于input之类的表单控件，当你手动设置outline-style，它将不会采用默认的触发方式，而是直接显示，在没有手动设置outline-style的情况下，outline-width不生效。
-
cursor: pointer; 鼠标呈现为指示链接的一只手
CSS伪元素和伪类
什么是伪类？
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。
语法
伪类就是开头为冒号的关键字：
1
| selector: pseudo-class-name{}
|
常见伪类：
什么是伪元素？
伪元素是一个附加到选择器末的关键词，允许你对被选择元素的特定部分修改样式。
语法
1
2
3
| selector::pseudo-element {
property: value;
}
|
常见伪元素
1
2
3
| ::after
::before
content
|
HTMl和CSS的结合方式
-
行内式：html中的属性标签style：适用于单纯只有一个标签需要设置时的特殊样式。如果多个标签需要应用同一个样式，建议采用内嵌式。
1
| <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World</h1>
|
-
内嵌式：建议在head中使用，使用标签 style 适用于当前页面多个标签使用同一个样式。
1
2
3
4
5
6
7
8
9
10
11
12
| <head>
<style>
p{
color: blue;
font-size: 50px;
}
</style>
<head/>
<body>
<p>内嵌<p/>
<body/>
|
-
外链式：link:适用于多个页面使用同一个样式时。
1
| <link rel="stylesheet" href="css/my.css" />
|
注意：link中href属性必须有，表示链接的css文件。