关于自学HTML+CSS+JS的日子(2)

html的基础语法在我眼中就是围绕着标签进行，下一步就是CSS。

简单来说CSS就是对HTML的修饰。

简述:CSS就是对html文件的修饰，简单的组成为 选择器+属性+属性值

 例如：<style>

P {

Color: red;

}

</style>    (标签选择器)

P就是选择器，color就是属性，red就是属性值。

选择器的种类:基础选择器，复合选择器。

基础选择器：标签选择器，类选择器，id选择器，通配符选择器。

标签选择器:将标签内的全部内容属性值改变。

类选择器:单独选择某一个或者某几个的属性值改变。

.类名{

属性:属性值;

}

<xxx class=”类名”>

id选择器:样式#定义，结构调id，只能用一次

用法与类选择器相同  具体区别如图:

通配符选择器

用*号表示，直接将整个页面的属性配置属性值。

CSS的复合选择器

• 后代选择器

元素1  元素2 {样式声明}   注意:元素2必须被包含于元素1，且更改的是元素2的属性

元素1  元素2都是基础选择器即可

• 子选择器

只能选择元素1最近的亲儿子进行属性更改

元素1>元素2{样式声明}

• 并集选择器

元素1，元素2{样式声明}

任何形式的选择器都可以用并集选择器

• 伪类选择器

链接伪类选择器的注意事项：

1. 为了确保生效，请按照LVHA的顺序声明，link，visited，hover，active。
2. 必须单独配置

对链接进行选择例如

选择器总结：

CSS中字体属性

Font: Font-style   font-weight  font-size  font-family

CSS文本属性

CSS三大引入方式:

Chorme调试工具

在浏览器打开之后按F12即可。

Chorme的使用：

1. Ctrl＋滚轮可以放大或者缩小开发工具代码大小
2. 左边是HTML结构，右边时CSS表现
3. 右边CSS可以改动数值和查看颜色
4. Ctrl＋0复原浏览器大小
5. 如果点击元素，发现右侧没有样式引入，极有可能类名或者样式引入错误。
6. 如果有样式，但是有黄色感叹号，则时样式属性书写错误。

Emmet语法