前端知识——CSS

CSS 页面美化和布局控制

概念：

Cascading Style Sheets 层叠样式表

• 层叠：多个样式可以作用在同一个html元素上，同时生效

好处

1. 功能强大
2. 将内容展示和样式控制分离
   1. 降低耦合度
   2. 让分工协作更容易
   3. 可以提高开发效率

CSS使用

CSS与html结合方式

1. 内联样式

• 在标签内使用style属性指定css代码

2. 内部样式

    
    
    



Hello Css

3. 外部样式

• 在head标签内 定义link标签，引入外部的资源文件

a.css
div {
    color: lightgreen;
}
* head中link标签引入

    
    

    

注意：

1. 1，2，3 三种方式 css作用范围越来越大

CSS语法

格式

选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}

注意： 每一对属性要用,隔开，最后一对属性可以不加；

选择器

分类

基础选择器

1. id选择器 选择具体的id属性值的元素

* 语法：#id属性值{}

  
永不妥协

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

• 语法：标签名称{}

div {
            color: green;
        }

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

3. 类选择器
   选择具有相同的class属性值的元素

• 语法 .class属性值{}

.cls1 {
            color: blue;
        }
道不同不相为谋

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

以上选择器中 id选择器优先级>类选择器优先级>元素选择器优先级

扩展选择器

1. 选择所有元素：

• 语法 *{}
  通用选择器，会选择所有元素

2. 并集选择器

• 语法 选择器1,选择器2{}

3. 子选择器 筛选选择器1下的选择器2

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

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

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

5. 属性选择器 选择元素名称,属性名=属性值的元素

• 语法 元素名称[属性名=‘属性值’]{}

        /*属性选择器*/
        input[type='text'] {
            border: 1px solid red;
        }

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

• 语法：元素:状态{}

 a:link {
            color: deeppink;

        }

        a:hover {
            color: blueviolet;
        }

        a:active {
            color: greenyellow;
        }

        a:visited {
            color: black;
        }

去死吧

属性(常见)

1. 字体 文本
   • font-size:字体大小
   • color:文本颜色
   • text-align:文本对齐方式
   • line-height:行高
2. 背景
   • background 背景 复合属性
3. 边框 轮廓
   • border:边框 复合属性
4. 尺寸
   • 宽度:width
   • 高度:heigh
5. 盒子模型 控制布局
   • margin:外边距
   • padding:内边距
     • 默认情况下 内边距会影响盒子的大小