【介绍】HTML&CSS必知必会，学习笔记

CSS

css：页面美化和布局控制

1. 概念：

Cascading Style Sheets 层叠样式表

2. 好处：

·功能强大
·将内容的展示和样式控制分离

- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

3. css的使用：css与html的样式结合

1. 内联样式：在标签内使用style属性指定css代码
2. 内部样式：在head标签内，定义style标签，style标签的标签体就是css代码
3. 外部样式：
    1. 定义css资源文件
    2. 在head标签内定义link标签，引入外部资源文件

注意：1，2，3种方式 css作用范围越来越大。第一种方式不常用,后期常用后两种

4. css语法：

格式

选择器{

属性名1:属性值1;

属性名2:属性值2;

}

选择器：筛选具有相似特征的元素

注意：每一对属性需要使用;隔开，最后一对属性可以不加;

5. 选择器：

分类：

1. 基础选择器：

1. id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一

    语法：#id属性值{}

2. 元素选择器：选择具有相同标签名称的元素

    语法：标签名称{}

    注意：id选择器优先级高于元素选择器

3. 类选择器

    语法：.class属性指{}

    注意：类选择器优先级高于元素选择器

2. 扩展选择器：

1.  选择所有元素

    语法：*{}

2. 并集选择器

    选择器1，选择器2{}

3. 子选择器：筛选选择器1下的选择器2元素

    语法：选择器1  选择器2{}

4. 父选择器：筛选选择器2的父元素选择器1

    语法：选择器1>选择器2{}

5. 属性选择器：选择元素名称，属性名=属性指的元素

    语法：元素名称[属性名=“属性指”]{}

6. 为类选择器：选择一些元素具有的状态

    语法：元素：状态{}

    状态：

    link：初始化的状态

    visited：被访问过的状态

    active：正在访问的状态

    hover：鼠标悬浮的状态

6. 属性

1. 字体、文本

font-size：字体大小

color：文本颜色

text-align：对齐方式

line-height：行高

2. 背景

background

3. 边框

border：设置表框、符合属性

4. 尺寸

width：宽度

height：高度

5. 盒子模型

margin：外边距

padding：内边距

默认情况下内边距会影响盒子的大小

来源：学习笔记