这是我参与第四届青训营笔记创作活动的第2天。
CSS示例
层叠样式表/Cascading Style Sheets
-
定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
<!--选择器示例-->
h1{
color:white;
font-size:14px
}
使用CSS的三种方法
外链（推荐，解耦）
<link rel = "stylesheets" href= "a.css">
嵌入
<style>
div{
color: red;
color: rgb(255, 0, 0);
color: #ff000f;
}
</style>
内联（不推荐，少用）
<p style="color: aqua;font-size: 10px;">example</p>
CSS是如何工作的
解析CSS，添加样式到DOM节点
选择器Selector
-
找出页面元素，给其设置样式
-
使用多种方法选择元素
- 标签名、类名、id
- 属性
- DOM树位置
基础选择器(一个选择器组成)
- 标签选择器
p{
color:blue;
font-size: 50px;
}
- 类选择器
.red {
color: red;
}
.font35 {
font-size: 35px;
}
<div class="red">哈哈哈哈哈哈 </div>
<!-- 多类名 用空格隔开-->
<!-- 相同的属性可以放同一个类里 统一修改方便 -->
<div class="red font35">hello</div>
- id选择器
#a{
color: pink;
}
<!-- 只能调用一次 -->
<p id="a">Hello</p>
- 通配符选择器
<!--选取所有元素-->
* {
color: yellow;
}
/* 复合样式格式 简写的方式 顺序不可颠倒 font-size和font-family不能省*/
/* font ：font-size font-weight font-size/line-height font-family; */
div{
font: italic 700 16px 'Microsoft yahei';
}
关于文本颜色的不同表示
<style>
div{
color: red;
color: rgb(255, 0, 0);
color: #ff000f;
}
</style>
关于css其他标签
- 居中
div{
text-align: center;
}
.p{
text-decoration:underline;/*下划线*/
/* overline是上划线 */
/* line-through是删除线 */
/* none是默认 */
}
.w{
/* text-indent: 10px; */
text-indent: 2em;/*相当于缩进两个字*/
}
a{
text-decoration: none;/*可用于去掉超链接的下划线*/
color: saddlebrown;
}
Emmet语法
<!-- 生成多个标签 比如div*5 -->
<!-- 父子级标签 比如ul>li -->
<!-- 兄弟级标签 比如div+p -->
<!-- 带样式的标签 .+样式名或p.q -->
<!-- 生成有序号的 .q$*5 如下-->
<div class="q1"></div>
<div class="q2"></div>
<div class="q3"></div>
<div class="q4"></div>
<div class="q5"></div
<!-- 标签默认生成文字 div{这是默认的文字} -->
<!-- 比如div{$}*5 效果如下-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
复合选择器
- 后代选择器（包含选择器）
/* 只改变ol里面的li标签 */
ol li {
color: red;
}
/* 改变ol里面li里面的a标签 */
ol li a {
color: seagreen;
}
<ol>
<li>1</li>
<li>2</li>
<li><a href="#">hhhh</a></li>
</ol>
- 子选择器
/* 目的在于区分两个一样的标签 */
.q li a {
color: yellow;
}
/* 改变q子代的a标签 */
.q>a {
color: crimson;
}
<ol class="q">
<a href="#">qqqq</a>
<li>1</li>
<li>2</li>
<li><a href="#">hhhh</a></li>
</ol>
- 并集选择器
/* 并集选择器 */
div,
p,
.qwe {
color: blue;
}
<div>一</div>
<p>二</p>
<ul class="qwe">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
- 伪类选择器
/* 顺序不要变 */
/* 链接要单独指定样式 */
a {
color: silver;
text-decoration: none;
}
/* 未访问的链接 */
a:link {
color: #333;
text-decoration: none;
}
/* 访问过的链接 */
a:visted {
color: orange;
text-decoration: none;
}
/* 选择鼠标经过的链接 */
a:hover {
color: skyblue;
text-decoration: underline;
}
/* 选择鼠标正在按下未弹起的标签 */
a:active {
color: seagreen;
text-decoration: none;
}
<!-- 链接伪类 -->
<a href="#">链接1</a>
未完待续。。。
