CSS（待添加）
css的相关类容比较多，准备分几个模块写
css简介
什么是css
css（cascading style sheets）是用来为网页添加样式的代码
例如：
p {
color: red;
width: 50px;
border: 1px solid black;
}
上面代码，p是我们选中的元素，意思我们将对p元素添加样式，里面的内容是我们的样式代码，然后用{}包裹样式代码
再举一例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蔡华鹏的博客</title>
</head>
<body>
<h1>css 简介</h1>
<p>我们怎么学习css</p>
</body>
<html>
/*style.css*/
h1 {
color: red;
}
p {
color; blue;
}
上面代码中css的功能就是<h1>标签里的字体颜色变成红色，p标签里的字体颜色变为蓝色
看看css的工作原理：
[图片上传失败...(image-c0142a-1527749256671)]
参考链接
- cssreference.io/
- CSS reference
-
CSS basics
我们现在知道了，什么是css，css会有怎样的效果以及css的工作原理，那么我们现在需要去知道怎么引用css，和怎么去选择元素，以及怎么去运用scc
css的应用方式
外部样式表（比较推荐）
1、通过<link>引入scc，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
2、通过@import引入样式，放入css中（注意：不要忘记分号）
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
内部样式表
将css放在页面的<style>元素中，如：
<style>
h1 {
background: red;
}
内联样式（不推荐，但在有些情况下很有用）
<p style="background: blue; font-size: 12px;>css hello</p>
属性样式（废弃）
<img src="图片地址" width=12 height=12>
css选择器
CSS 选择器用于定位我们想要给予样式的 HTML 元素
选择器类型
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
基础选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面任何元素（这也决定了我们很少用） |
| #id | id选择器，匹配特定id元素 |
| .class | 类选择器，匹配class包含（不是等于）特定类元素 |
| element | 标签选择器 |
用法：
* {
box-sizing: border-box;
}
通用选择器，匹配页面所有元素
<p id="notification">通知：明天放假</p>
#notification {
font-size: 24px;
}
id选择器，以上代码匹配id为notification的元素
<li class="first done">起床</li>
<li class="second done">刷牙</li>
<li class="third">洗脸</li>
</ul>
.first {
font-weight: bold;
}
.done {
text-decoration: line-through;
}
类选择器，一个 CSS 类可以应用到多个不同的元素，一个元素也可以应用多个不同的 CSS 类
p {
color: red;
}
div {
color: blue;
}
标签选择器，以上代码匹配标签为p和标签为div的元素
组合选择器
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分割，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分离，匹配E元素所有的后代（不只是子元素，子元素向下递归）元素F |
| E>F | 子元素选择器，用>分离，匹配E元素的所有直接F元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素 |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻于否） |
| .class1.class2 | 匹配同时拥有class1和class2的元素，连写的时候中间没有分隔符号,，.和#本身充当分隔符元素 |
属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
|
| E[attr=value | 匹配属性attr值为value的元素，div[id=text]，匹配id=text的div
|
| E[attr~=value | 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素 |
| E[^=value | 匹配属性attr的值以value开头的元素 |
| E[$=value | 匹配属性attr的值以value结尾的元素 |
| E[*=value | 匹配属性attr的值包含value的元素 |
| E[attr|=val] |
伪类选择器
| 选择器 | 含义 |
|---|---|
伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
css优先级
从高到低分别是
1、在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2、作为style属性写在元素标签上的内联样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配选择器
9、浏览器自定义
一篇漂亮的网页，需要css去渲染它。所以要学会使用css去操作出自己需要的样式，在学会操作样式之前要知道一些元素的特性，方便于达到自己想要的结果
块级元素和行内元素
- 块级(block-level);内联(inline-level)
- 块级可以包含块级和行内，行内只能包含文本和行内
- 块级占据一整行空间，行内占据自身宽度空间
- 高宽设置、内外边的差异
block-level 如：
div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th .....
inline-level
em strong span a br img button input label select textarea
code script
宽高
只对块级元素设置生效，对行内元素设置无效
在网页中，我们会看到有些类容被边框包围，那么我们来了解一下边框。同时，我们还可以利用边框去做一些好看的形状
边框（border）
-
border-width
-
border-color
-
border-style
-
border-radius
-
border-width
设置边框的宽度
h1 {
border-width: 8px;
}
-
border-color
设置边框颜色
h1 {
border-color: red;
}
-
border-style
设置边框的样式
h1 {
border-style: solid; /*dotted dash*/
}
-
border-radius
用于给元素添加圆角
h1 {
border-radius: 8px;
}
边框简写
.box {
border: 5px dotted #ccc;
}
使用边框做三角形
<div class="triangle"></div>
.triangle {
width: 0;
height: 0;
border-top: 100px solid deepskyblue;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
在学习后面内容时，我们要先了解一下元素的和模型结构
盒模型
padding
- padding代表内边距，有四个方向的值，可以合写，值可以是数值，也可以是百分比（相对于父容器不是本身）
- padding-top
- padding-right
- padding-bottom
- padding-left
margin
-margin代表外边距，有四个方向的值，可以合写，值可以是数值，也可以是百分比（相对于父容器不是本身），还可以是负值
- margin-top
- margin-right
- margin-bottom
- margin-left
margin: 0 auto
对于块级元素设置margin: 0 auto;可达到剧中的目的
文本样式
font
- font-size: 字体大小
- font-family: 字体，宋体，微软雅黑，Arial等
- font-weight: 文字粗度，常用的就是默认值regular和粗体bold
- font-height: 行高，可以用作百分比，倍数或者固定尺寸
- 以上属性都可以继承个子元素
文本
- text-align: 文本对其方式left、center、right、justify
- text-indent: 文案第一行缩进距离
- text-decoration: none、underline、line-through、overline
- color: 文字颜色
- text-transform: 改变字体大小写none、uppercase、lowercase、capitalize
- text-spacing: 可以改变字（单词）之间的标准间隔
- letter-spacing: 字母间隔修改的是字符或字母之间的间隔
行内元素居中
<style>
.box {
text-align: center:
}
</style>
**单行文本溢出加、、、
网友评论