扁平化网站特效公众号模板网站
目录
一、语法
二、创建
外部样式表
内部样式表
内联样式
三、选择器
ID选择器
类选择器
伪类选择器
:hover
a:link
a:active
a:visited
属性选择器
伪元素选择器
::first-letter
::first-line
::selection
::placeholder
::before 和::after
通配选择器
标签选择器
参考资料：
一、语法
由选择器和多条声明构成，一条声明由属性和值构成。
二、创建
外部样式表
使用link元素链接外部样式表，外部样式表是一个以.css结尾的文件。
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部样式表
使用style元素将CSS语言括起来，定义在头文件上。
<head>
<style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
</style>
</head>内联样式
使用元素内部使用style属性编写CSS样式表，定义在元素上。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>注意：内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表
三、选择器
ID选择器
以#开头，后面跟着ID名称，因为ID在HTML里具有唯一性，具体效果针对单一ID名称相同元素。例如：针对以下元素。
HTML代码
<p id="para1">这是一个段落。</p>CSS代码
#para1
{text-align:center;color:red;
}类选择器
以.开头，后面跟着类名称，类名称不具有唯一性，对一类的元素进行同样的CSS渲染，如果要特指类内的某一元素标签，则空格后跟元素标签。
HTML代码
<div class="content-class"></div>CSS代码
.content-class {color: blue;
}
/*匹配类*/.content-class div{color: blue;
}
/*匹配content-class类中的div标签*/伪类选择器
伪类是用于指定所选元素的特殊状态。不同的元素有着不同的伪类。伪类由冒号后跟着伪类名称组成（例如，
:hover）。函数式伪类还包含一对括号来定义参数。附上了伪类的元素被定义为锚元素（例如，button:hover中的button）。它与一些用户交互有关，某些并不是直接的显现。以下是常见元素的伪类使用。
<any>:hover
鼠标悬浮在元素上，可用于所有元素
a:hover{background-color:yellow;
}
button:hover{background-color:yellow；
}a:link
设置了未访问过的页面链接样式，可用于a元素
a:link
{background-color:yellow;
}a:active
设置点击链接后按下的样式，短暂时刻，可用于a元素
注意：为了产生预期的效果，在CSS定义中，:active必须位于:hover之后！
a:active
{background-color:yellow;
}a:visited
设置访问过的页面链接的样式，可用于a元素
a:visited
{background-color:yellow;
}属性选择器
CSS 属性选择器匹配那些具有特定属性或属性值的元素。
/* 存在 title 属性的 <a> 元素 */
a[title] {color: purple;
}/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"]
{color: green;
}伪元素选择器
伪元素选择器用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等等。
注意：一个基础选择器只能附加搭配一个伪元素
选择器，它与伪类选择器的区别是有两个冒号:: 。
常见伪元素选择器
::first-letter
选中块级元素第一行的第一个字母，也就是说块级元素第一行为文字可使用。
div::first-letter {font-size: 30px;color: orange;
}
::first-line
选中块级元素第一行，也就是说块级元素第一行为文字可使用。
div::first-line {font-size: 20px;color: red;
}
::selection
使用鼠标或其他选择设备选中的部分进行样式渲染。
/* 选中的文字颜色会变为红色，背景色为天蓝色 */
div::selection {color: red;background-color: skyblue;
}
::placeholder
它作用于<input>或<textarea>元素中的占位文本。
/* 文本字体为橙色，切背景为天蓝色 */
input::placeholder {color: orange;background-color: skyblue;
}
::before 和::after
before会在选中元素之前添加一个伪元素，而after会在选中元素之后，添加一个伪元素。通过 content属性来为一个元素添加修饰性的内容。
注意： ::before 和::after必须要包含content属性
HTML代码
<div class="item"><div></div>
</div>
CSS代码：&指向父元素也就是包裹它的元素本身，它也叫父占位符。
.item div{position: relative;border: 1px solid #03A9F3;&::before,&::after {content: "";position: absolute;width: 20px;height: 20px;transition: .3s ease-in-out;}&::before {top: -5px;left: -5px;border-top: 1px solid var(--borderColor);border-left: 1px solid var(--borderColor);}&::after {right: -5px;bottom: -5px;border-bottom: 1px solid var(--borderColor);border-right: 1px solid var(--borderColor);}&:hover::before,&:hover::after {width: calc(100% + 9px);height: calc(100% + 9px);}
}
通配选择器
要使所有元素满足一个样式，可以使用通配选择器*
CSS代码
*{margin:0; padding:0;
}标签选择器
针对HTML的标签元素，具有和类选择器差不多的效果，可以多个属于同标签元素进行渲染，还可以跟类选择器搭配使用，例如：div.fruit表示所有div标签里的类值为fruit的。
CSS代码
div {color: grey;
}参考资料：
CSS 伪类 | 菜鸟教程
CSS基础之伪元素选择器-CSDN博客