这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS（上）
CSS是什么
-
is short for Cascading Style Sheets
-
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
h1{
/*h1--选择器Selector：选择元素*/
color: white;
/*color--选择器Property：选择属性；white--属性值Value*/
font-size: 14px;
/*Property和Value组成一个声明Declaration*/
}
/*选择器+花括号组成一个规则*/
如何页面中使用CSS
<!--外联--> <!--推荐-->
<link rel="stylesheet" href="/assets/style.css">
<!--将css文件链接到html文件中-->
<!--嵌入--> <!--组件式开发-->
<style>
li {
margin: 0;
list-style: none;
}
p {
margin: lem 0;
}
</style>
<!--将css代码写在标签中-->
<!--内联--> <!--不推荐-->
<p style="margin:lem">
Example Content
</p>
<!--将样式赋给标签中的style属性-->
<!--不需要写选择器-->
<!---->
组件式开发模式下：可能会把html/css/js写在同一个文件
嵌入使用CSS示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
h1 {
color: orange;
font-size: 24px;
}
p {
color: gray;
font-size: 14px;
line-height: 1.8;
}
</style>
<!--style标签中嵌入css代码设置样式-->
</head>
<body>
<h1>Web框架的架构模式探讨</h1>
<p>在写干货之前，我想先探讨两个问题，
模式的局限性？模式有什么用？</p>
</body>
</html>
<!---->
效果：
CSS是如何工作的
选择器 Selector
-
找出页面中的元素，以便设置样式
-
可使用多种方法选择元素
- 按照标签名、类名或 id
- 按照属性
- 按照 DOM 树中的位置
通配选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
* {
color: red;
font-size: 20px;
}
</style>
<!--星号*表示全部选择-->
效果：
标签选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
h1 {
color: orange;
}
p {
color: gray;
font-size: 20px;
}
</style>
<!--用标签名作为选择器-->
效果：
id选择器
-
标签中设置 id 属性
- id 值保持唯一
-
以 #id属性值 作为选择器
<h1 id="logo">
<img src="https://assets.codepen.io/59477/h5-logo.svg" alt="HTML5 logo" width="48" />
HTML5 文档
<h1>
<style>
#logo {
font-size: 60px;
font-weight: 200;
}
</style>
<!---->
效果：
类选择器
-
标签中设置 class 属性
- class 保持唯一
-
以 .class属性值 作为选择器
<h2>Todo List</h2>
<ul>
<li class="done">Learn HTML</li>
<li class="done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color: gray;
text-decoration: line-through;
}
</style>
效果：
属性选择器
属性选择器1
-
以属性名作为选择器
-
input 标签
- disabled 属性，使该输入框不可输入，可显示值
- type 属性，password 值，输入后不可见
<label>用户名：</label>
<input value="zhao" disabled />
<label>密码：</label>
<input value="123456" type="password" />
<style>
[disabled] { /*属性选择器1*/
background: #eee;
color: #999;
}
</style>
效果：
属性选择器2
-
以 标签名 [ 属性名=" 值 " ] 形式作为选择器
- input[type="password"]{}
<p>
<label>密码：</label>
<input type="password" value="123456" />
<input value="123" />
</p>
<style>
input[type="password"] { /*属性选择器2*/
border-color: red;
color: red;
}
</style>
效果：
属性选择器3
<p><a href="#top">回到顶部</a></p>
<p><a href="https://assets.codepen.io/59477/h5-logo.svg">查看图片</a></p>
<style>
a[href^="#"] {
color: #f54767;
background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
padding-left: 1.1em;
}
a[href$=".jpg"] {
color: deepskyblue;
background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
padding-left: 1.2em;
}
</style>
效果：
伪类
-
不基于标签和属性定位元素
-
几种伪类
- 状态伪类
- 结构性伪类
状态伪类
<a href="http://example.com">
example.com
</a>
<label>
用户名：
<input type="text">
</label>
<style>
a:link { /*链接本身的状态*/
color: black;
}
a:visited { /*链接被点击过后的状态*/
color: gray;
}
a:hover { /*链接被鼠标覆盖时的状态*/
color: orange;
}
a:active { /*链接在鼠标点击时的状态*/
color: red;
}
:focus { /*对a和label类选择focus属性*/
outline: 2px solid orange;
}
</style>
效果：
结构性伪类
<ol>
<li>阿凡达</li>
<li>泰坦尼克号</li>
<li>星球大战：原力觉醒</li>
<li>复仇者联盟 3</li>
<li>侏罗纪世界</li>
</ol>
<style>
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em
}
li:first-child { /*选择第一个元素*/
color: coral
}
li:last-child { /*最后一个元素*/
border-bottom: none;
}
</style>
效果：
组合器
<label>
用户名：
<input class="error" value="aa">
</label>
<span class="error">
最少3个字符
</span>
<style>
.error {
color: red;
}
input.error { /*直接组合*/
border-color: red;
}
</style>
<article>
<h1>拉森火山国家公园</h1>
<p>拉森火山国家公园是位于...</p>
<section>
<h2>气候</h2>
<p>因为拉森火山国家公园...</p>
<p>高于这个高度，气候非常寒冷...</p>
</section>
</article>
<style>
article p { /*后代组合*/
color: black;
}
article > p { /*亲子组合*/
color: blue;
}
h2 + p { /*相邻组合*/
color: red;
}
</style>
选择器组
CSS（上）
CSS是什么如何页面中使用CSS嵌入使用CSS示例CSS是如何工作的选择器 Selector通配选择器标签选择器id选择器类选择器属性选择器属性选择器1属性选择器2属性选择器3伪类状态伪类结构性伪类组合器选择器组
