这是我参与「第四届青训营 」笔记创作活动的的第2天
css的概念
层叠样式表 (Cascading Style Sheets )
层叠：多个样式可以作用在同一个html的元素上，同时生效
顾名思义传统的html格式较为单一，页面样式较为老套，所以css是用来美化页面布局效果，让页面看起来更加美观，使人看起来感到舒服的功能。
css的使用方法
使用css有三种布局模式
- 外链式
<link rel="stylesheet" href="./css/style.css>
- 嵌入式
<style>
div{
width:100px;
height:100px;
border:3px soild red;
}
</style>
- 内联式
<div style="width:100px; height:100px; border:3px soild red;"></div>
优先级顺序：内联式 > 嵌入式 > 外部式
选择器
选择器就是筛选具有相似特征的元素
基础选择器有：
- 元素选择器
<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
h1 {
color: orange;
}
p {
color: gray;
font-size: 20px;
}
</style>
- 类选择器
<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>
- 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>
拓展选择器有：
1. 选择所有元素：
语法： *{ }
2. 并集选择器：
选择器1,选择器2{ }
3. 子选择器：筛选选择器1元素下的选择器2元素
语法： 选择器1 选择器2{ }
4. 父选择器：筛选选择器2的父元素选择器1
语法： 选择器1 > 选择器2{ }
5. 属性选择器：选择元素名称，属性名=属性值的元素
语法： 元素名称[属性名=“属性值”]{ }
6. 伪类选择器：选择一些元素具有的状态
语法： 元素:状态{ }
例： <a>
状态：
link：初始化的状态
visited：被访问过的状态
active：正在访问状态
hover：鼠标悬浮状态
属性
- 字体、文本
font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高
- 背景
background：
- 边框
border：设置边框，符合属性
- 尺寸
width：宽度
height：高度
- 盒子模型：控制布局
margin：外边距
padding：内边距
float：浮动
继承
无继承性的属性
- display：
元素布局类型
- 文本属性：
vertical-align：垂直文本对齐
text-decration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
- 盒子模型的属性：
width
height
margin
border
padding
- 背景属性：
background background-color background-image background-repeat background-position background-attachment
- 定位属性：
float
clear
position
top
right
bottom
left
min-width
min-height
max-width
max-height
overflow
clip
z-index
- 生成内容属性：
content
counter-reset
counter-increment
- 轮廓样式属性：
outline-style
outline-width
outline-color
outline
- 页面样式属性：
size
page-break-before
page-break-after
- 声音样式属性：
pause-before
pause-after
pause
cue-before
cue-after
cue
play-during
有继承性的属性
- 字体系列属性：
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
- 文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色
- 元素可见性：
visibility：控制元素显示隐藏
- 列表布局属性：
list-style：列表风格，包括list-style-type、list-style-image等
- 光标属性：
cursor：光标显示为何种形态
