这篇博客详细介绍了CSS的基础知识，包括选择器、盒模型、字体设置、文字样式和盒子效果。通过实例展示了如何使用CSS进行样式定义，如设置字体大小、颜色、行间距，以及如何创建圆角、阴影效果。还提到了CSS中的继承和特异度概念，以及各种长度单位和颜色表示方法。
HTML大概一天就学完了，主要是一个网页的基本框架，然而只能实现基本的功能。CSS是对HTML的一个样式优化，可以对内部文字、图片的位置、颜色进行修改，使页面变得更简洁且美观。
1 CSS简介
CSS是用来定义页面元素的样式：设置字体和颜色；设置位置和大小；添加动画效果。
最简单的CSS代码
h1{
color:white;
font-size:14px;
}
对h1进行属性的设置
在页面中使用CSS有三种方式：外链、嵌入和内连。比较建议使用外链，如：
<link rel="stylesheet" href="/assets/style.css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog </title>
<style>
h1 {
color: orange;
fontsize: 24px;
}
p {
color: gray;
fontsize: 14px;
lineheight: 1.8;
}
</style>
</head>
<body>
<h1>Web框架的架构模式探讨 </h1>
<p>在写⼲货之前，我想先探讨两个问题，模式的局限性？模式有什么⽤？ </p>
</body>
</html>
这其中就对分别对h1和p进行了CSS设置，颜色和大小以及线长。
CSS工作原理如图所示：
2 基础选择器
即对所选中的项目进行CSS设置
2.1 通配选择器
*{}：对所有的文字都会选择
2.2 标签选择器
在{}前面写所需要的标签，如h1{}
2.3 id选择器
<li id="logo" >
#logo{
}#进行CSS设置
2.4 类选择器
<li class="done">
.done{
}#进行CSS设置
2.5 属性选择器
input[disabled]：对属性为disabled的部分进行设置
input[type=“password”]：对类型为password的部分进行CSS设置
a[href^="#"]：对前缀有#的部分进行设置
a[href$=".jpg"]：对后缀为.jpg的部分进行设置
2.6 伪类
不基于标签和属性定位元素，包括动态伪类和结构性伪类。
动态伪类
比如对一个超链接，想让他实现在不同状态下显示不同的颜色，可以使用动态伪类。
<p>
<a href="http: example.com" target="_blank">example.com </a>
</p>
<label>⽤户名：<input type="text">
</label>
<style>
a:link {
color: black;
}#一个正常的链接是黑色
a:visited {
color: gray;
}#访问过的链接是灰色
a:hover {
color: orange;
}#鼠标悬停到的链接是橙色
a:active {
color: red;
}#鼠标按下去的链接是红色
:focus{
outline: 2px solid orange;
}#输入时候的边框为橙色
</style>
结构性伪类
<h2>电影票房排⾏ </h2>
<ol>
<li>阿凡达 </li>
<li>泰坦尼克号 </li>
<li>星球⼤战：原⼒觉醒 </li>
<li>复仇者联盟 3 </li>
<li>侏罗纪世界 </li>
</ol>
对于上面一段表示表格的代码进行选择，可以选择第一句或者最后一句，这样对结构较为敏感的伪类。
li:first-child {
color: coral
}
li:last-child {
color: coral
}
2.7 组合器
下面一段代码表示在输入错误的时候会将边框或字符改成红色，可以进行组合，具体需要到JavaScript部分进行介绍。
<label>
⽤户名：
<input class="error" value=
最低0.47元/天 解锁文章
扫一扫
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
