这是我参与「第五届青训营」伴学笔记的第二天
一、CSS是什么
- CSS英文全称是Cascading Style Sheets
层叠样式表 用来定义页面元素的样式 - 可以设置字体颜色，设置位置和大小，添加动画效果
1.css代码构成
在举例中
- h1为选择器Selector
- color属性选择器Property
- white属性值Value
- color:white一起为声明Declaration
h1 {
color: white;
}
2.CSS的使用方法
- 外链式
<link rel="stylesheet" href="/expr/project/css/index.css">
- 嵌入式
<style>
li {
margin: 0;
list-style: none;
}
</style>
- 内联式
<p style="margin: lem 0;">Example Content</p>
注：推荐使用外链写法，可以做到内容和样式的分离；对于组件式开发，vue的单文件组件是把html、css、js写在一起的,嵌入式也很常用；较为不推荐使用内联样式，特殊情况下使用。
3.CSS是如何工作的
首先浏览器加载并解析HTML，创建一棵DOM树，解析HTML时加载并解析css，添加样式到相应节点，得到一棵渲染树，最终展示到页面，如图。
二、选择器Selector
作用：找出页面中的元素，以便给他们设置样式
方式1：按照标签名、类名或id
- 通配选择器 * 可以将页面中所有元素渲染
<style>
*{
color: red;
font-size: 14px;
}
</style>
- 标签选择器 通过标签来选择
<style>
h1 {
color: white;
font-size: 14px;
}
</style>
<body>
<h1></h1>
</body>
- id选择器 给标签设置id属性来选择 需要注意id在页面中唯一
<style>
#logo {
font-size: 60px;
font-weight: 200;
color: red;
}
</style>
<body>
<h1 id="logo">Example Content</h1>
</body>
- 类选择器 给标签设置class属性来选择 可以出现多次，很常用
<style>
.done {
color: grey;
text-decoration: line-through;
}
</style>
<body>
<ul>
<li class="done">HTML</li>
<li class="done">CSS</li>
<li>JS</li>
</ul>
</body>
方式2：按照属性
根据属性是一个特定的值来选择元素，如例子中input有一个禁用属性，想要给所有有disabled属性的标签进行更改样式，就可以用到属性选择器；想要某个属性有一个特定值时选中，则可以用属性名+特定值的形式进行样式的更改。
<style>
[disabled] {
background: #eee;
color: #999;
}
input[type="password"] {
border-color: red;
color: red;
}
</style>
<body>
<label>用户名：</label>
<input type="name" disabled />
<label>密码：</label>
<input type="password" value="123456">
</body>
当属性值匹配到某一条件时这样选择
<style>
a[href^="#"] {
color: red;
background: 0 center/1em url(shou.webp) no-repeat;
padding-left: 1.1em;
}
a[href$=".jpg"] {
color: pink;
background: 0 center/1em url(miHoYo_Game.2457753.png) no-repeat;
padding-left: 1.2em;
}
</style>
<body>
<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
</body>
方式3：按照DOM树中的位置
- 复合选择器之伪类选择器
复合选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个第n个元素,书写最大的特点是用（：）显示，有链接伪类，结构伪类等
<style>
/* 注意，编写的时候按照LVHA（love hate）来写,需要给a链接单独指定样式 */
/* 1.未访问的链接a:link */
a:link {
color: green;
/* 取消下划线 */
text-decoration: none;
}
/* 2.选择点击过的链接a:visited */
a:visited {
color: purple;
}
/* 3.选择鼠标经过的那个链接 a:hover */
a:hover {
color: skyblue;
}
/* 4.选择的是鼠标正在按下去但没有弹起来的那个链接 */
a:active {
color: orange;
}
/* 日常使用的例子 */
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #369;
text-decoration: underline;
}
</style>
</head>
<body>
<!-- <a href="#">猪猪女孩</a> -->
<a href="#">fighting</a>
</body>
未完待续。。。
