AI智能
改变未来

初识CSS

CSS:作用:页面美化和布局控制。
1.概念 Cascading Style Sheets 层叠样式表;
     层叠:多个样式可以作用在同一个html的元素上(标签),同时生效。
2.好处
  2.1 功能强大;
  2.2 将内容展示和样式控制分离。
       降低耦合度。解耦。
       让分工协作更容易。
       提高开发效率。
3.CSS的使用:CSS与html结合方式
  3.1 内联样式:在标签内使用style属性指定css代码(不推荐使用)。
  3.2 内部样式:在head标签内,定义style标签,style标签的标签体内容就是css代码。.
  3.3 外部样式:步骤1. 定义css资源文件; 在head标签内,定义link标签,引入外部的资源文件。
  注意:1.2.3种方式,CSS的范围越来越大。
4.CSS语法
   4.1格式:
     选择器{
        属性名1:属性值1;
        属性名2:属性值2;
        ........
            }
     选择器:筛选具有相似特征的元素。
     注意:每一对属性需要使用;隔开,最后一对属性可以不加;。
5.选择器: 筛选具有相似特征的元素。
  分类:
   5.1:基础选择器
    5.1.1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一。
    语法:#id属性值{}
    5.1.2元素选择器:选择具有相同标签名称的元素。
    语法: 标签名称{}
    注意:id选择器优先级高于元素选择器
    5.1.3类选择器:选择具有相同的class属性值的元素。
    语法:.class属性值{}
    注意:类选择器优先级高于元素选择器。
   5.2: 扩展选择器(常用的)
    5.2.1 选择所有元素:
     语法:* {}
    5.2.2 并集选择器:
    选择器1,选择器2{}
    5.2.3 子选择器:筛选选择器1元素下的选择器2元素。
     语法: 选择器1 选择器2{}
    5.2.4 父选择器:筛选选择器2的父元素选择器1。
    语法: 选择器1 > 选择器2{}
     5.2.5 属性选择器:选择元素名称,属性名=属性值的元素。
     语法: 元素名称[属性名=“属性值”]{}
     5.2.6 伪类选择器:选择一些元素具有的状态。
     语法: 元素:状态{}

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 初识CSS