这是我参与「第四届青训营」笔记创作活动的第2天

一，css是什么？

是用来定义页面元素的样式：

设置字体和颜色
设置位置和大小
添加动画效果

二，css选择器

1.外链

h1文件在另一个文件中，主文件的head中加入：

<link rel="stylesheet" href="文件名.css">

注：css文件要与html文件在同一文件夹下

调用：

<div class=""></div>

2.嵌入式

在主文件的head中加入：

<style>
     div{color = red;}
</style>

3.内链

<div style="rolor"></div>

三，css是如何工作的

四，选择器

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素：
- 按照标签名，类名或id
- 按照属性
- 按照DOM树中的位置

五，通配选择器

用来配置所有的元素属性

<style>
  *{color:red;}
 </style>

六，标签选择器

用来对应标签名的元素属性

<style>
    div{color: aqua;}
    span{color: rebeccapurple;}
  </style>

七，id选择器

用来配置对应id的选择器，注意：id名在本文件中要有唯一性

<style>
    #loge{color: rebeccapurple;}
  </style>

调用： <h1 id="loge"></h1>

八，类选择器

用来配置对应类的选择器，可以多次使用

<style>
.done{color: rebeccapurple;}
</style>

调用： <h1 class="done"></h1>

注：css选择器的优先级： 标签<类<id选择器

九，属性选择器

用来配置满足条件的元素

<style>
  [disabled]{
    color:red;
  }
</style>

这个代码表示用disable的被选中：

<input type="text" disabled>

a[href^='#'] 表示以#开头的href被选中

a[href$=“jpg”]表示以jpg结尾的href被选中

十，伪类

不基于标签和属性定位元素

两种伪类：

状态伪类
结构性伪类

1.状态伪类

元素处于某一种状态下才会被选中：

（1）链接：

a:link{} 默认
a:visited{} 访问过的（被点击过）
a:hover{} 鼠标移动到上面后
a:active{} 鼠标按下后

（2）列表：

li:first-child{} 列表第一个选中
li:last-child{} 列表最后一个选中

（3）输入：

:focuss{} 输入框输入时的状态选中

（4）组合：

input.error{} 同时满足input和error选中

2.组合

直接组合：A:B 满足A同时满足B
后代组合：A B 选中B，若他为A的子孙
亲子组合：A>B 选中B，若他为A的子元素
兄弟选择器：A~B 选中B，若他在A后且和A同级
相邻选择器：A+B 选中B，若他紧跟在A后面

十一，选择器组

同时选择h1,h2,h3,h4,h5

h1, h2, h3, h4, h5{}

同时选择标签为：zhangsan和标签为：lisi

[type="zhangsan"], [type="lisi"]{}

十二，字体

font-family:Fantasy,Cursive,Serif

1.五种字体：

Serif:宋体
Sans-serif:微软雅黑
Fantasy:特殊字体
Monospace:等宽字体
Cursive:手写体（楷体）

前两个为通用字体，在设置字体中，最后要加通用字体

在中英混写时，英文字体通常在中文字体前，这样可以保证中，英可以使用两种不同的字体

十三，文本对齐

left:左对齐
center：居中对齐
right：右对齐
justify：将空格拉大，达到两端对齐

十六，间距

leeter-soacing:xxpx; 字符间距
word-spacing:xxpx; 单词间距

十八，文本缩进

text-indent:xxpx; 段落开头距离

十九，文本修饰

none: 没有划线
uderline：下划线
line-through：删除线
overline：上划线

二十，格式问题

normal：保留一个空格，不保留换行，自动换行
nowrap：不保留空格，强制不换行，保留换行
pre：保留所有的空格，保留换行
pre-wrap：自动换行，保留空格，保留换行
pre-line：自动换行，不保留空格，保留换行

css初步 | 青训营笔记