一、CSS语法
1、CSS实例
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
2、CSS注释
/*这是注释*/
二、CSS的几种引入方式
1、行内样式
行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
2、内部样式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????p { ???????????background-color: greenyellow; ???????} ???</style></head><body> ???<p>海燕呐</p></body></html>3、外部样式
外部样式就是CSS写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link rel="stylesheet" href="style.css" type="text/css">
#href中的内容是导入的文件名，写在body中。
三、CSS选择器
1、基本选择器
<1>元素选择器
<!--p为选择的标签-->p {color:"red";} <2>ID选择器
<head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#c1 { ???????????color: red; ???????} ???</style></head><body> ???<div id="c1">海燕</div></body>
<3>类选择器
/*用类选择器来设置文本的大小*/.c1 { ???font-size: 14px;}/*设置p标签并且含有类名为c1的文本颜色为红色*/p.c1 { ???color: red;}<4>通用选择器
/*给所有的标签中内容都设置为白色*/* { ???color: white;}2、组合选择器
1、后代选择器
/*给div内部的a标签设置字体颜色*/div a { ???color: green;}/*给div内部的a标签设置字体颜色*/div a { ???color: green;}2、儿子选择器
/*选择所有父级是<div>的元素<p>元素*/div>p { ???font-family:Arial Black, arial-black, cursive;}3、毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/div+p { ???margin: 10px; ???color: deeppink; ???font-weight: bold;}4、弟弟选择器
/*选择div后面所有的兄弟div标签，设置边界线/边框，solid是指边框为实线，后面为边框的颜色*/div~div { ???border: 5px solid royalblue;}3、属性选择器
/*用于选取带有指定属性的元素*/p[title] { ???color: red;}/*用于选取带有指定属性和值的元素*/p[title="t1"] { ???color: mediumspringgreen;}4、分组和嵌套
1、分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
/*将代码为div标签和p标签统一设置字体为红色*/div,p { ???color: red;}2、嵌套
/*多种选择器可以混合起来使用，比如：将含有c1类的标签内部的所有p标签内容的字体颜色设置为红色。*/.c1 p { ???color: red;}5、伪类选择器
/*未访问的链接*/a:link { ???color:red}/*已访问的链接--访问过的链接会变色*/a:visited { ???color: #eee;}/*鼠标移动到链接上，当移动到上面时会变成设置的颜色*/a:hover { ???color: #fff;}/*选定的链接--鼠标选中以后会变成设置的颜色*/a:active { ???color: green;}/*input输入框获取焦点时样式*/input:focus { ???outline: none; ???background-color: darkmagenta;}6、伪元素选择器
1、first-letter 常用的给首字母设置特殊样式：
p:first-letter { ???font-size: 16px; ???color: blueviolet;}2、before 在每个<p>元素之前插入内容
p:before { ???content: ‘***‘; ???color: lawngreen;}3、after 在每个<p>元素之后插入内容
p:after { ???content:"1149102771"; ???color:skyblue;}补充：before和after多用于清除浮动。
7、选择器的优先级
1、CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。（也有一些属性不能被继承，如：border，margin，padding，background等。）
2、选择器的优先级
内联样式 + ID选择器 + 类选择器 + 元素选择器
1000 100 10 1
继承的优先级权重为0
除此之外还可以通过添加！import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用！import会使样式文件混乱不易维护。（不到万不得已不要使用！import）
8、CSS属性相关
1、width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。
2、字体属性
<1>文字字体
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它识别的第一个值。
前端基础之CSS
原文地址：https://www.cnblogs.com/wjs521/p/9568623.html