CSS

2020-05-01

CSS

字数统计: 638字 | 阅读时长≈ 2分钟

CSS

页面美化和布局控制

概念：Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素上，同时生效
好处
1. 功能强大
2. 将内容的展示和样式控制分离
  - 降低耦合度
  - 让分工协作更容易
  - 提高开发效率

CSS的使用：CSS与html结合方式

内联样式：在标签内使用style属性指定css代码
- 如：< div style=”color:red;”>hello< /div>

内部样式：在head标签内，定义style标签，style标签的内容就是css代码

如

<head>
    <style>
        div{
            color:blue;
        }
    </style>
</head>

<div>hello</div>

外部样式:定义css资源文件，在head标签内，定义link标签，引入外部资源文件。

如

<head>
    <link rel="stylesheet" href="css/a.css">
</head>

<div>hello</div>

CSS基本语法

格式：

选择器{
    属性名1：属性值1；
    属性名2：属性值2；
    .....
}

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

选择器

分类：
1. 基础选择器
  1. id选择器：选择具体的id属性值的元素。
    - 语法：#id属性值{}
    - 优先级最高
  2. 元素选择器：选择具有相同标签名称的元素。
    - 语法：标签名称{}
    - 优先级低于id选择器和类选择器
  3. 类选择器：选择具有相同的class属性值的元素。
    - 语法：.class属性值{}
    - 优先级低于id选择器
2. 扩展选择器
  1. *：表示选择所有元素
    - 语法：*{}
  2. 并集选择器：筛选选择器1下和选择器2共有的元素
    - 语法：选择器1，选择器2{}
  3. 子选择器：筛选选择器1下的选择器2的元素
    - 语法：选择器1 选择器2{}
  4. 父选择器：：筛选选择器2的父元素选择器1
    - 语法：选择器1>选择器2{}
  5. 属性选择器：选择元素名称，属性名=属性值的元素
    - 语法：元素名称[ 属性名=”属性值” ]{}
  6. 伪类选择器：选择一些元素所具有的状态
    - 语法：元素:状态{}

属性

字体、文本
- font-size：字体大小
- color：文本颜色
- text-align：文本对齐方式
- line-height：行高
背景
- background：复合属性。
边框
- border：设置边框，复合属性。
尺寸
- width：宽度
- height：高度
盒子模型：控制布局
- margin：外边距
- padding：内边距
  - 默认情况下内边距会影响整个盒子的大小，可以使用box-sizing：boder-box，让width和height就是盒子最终大小。
- float：浮动

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！

请我喝杯咖啡吧~

支付宝

微信