CSS3基础笔记

2024-08-11T11:10:00

一、CSS简介

层叠样式表(Cascading Style Sheets,缩写为 CSS)是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

二、CSS开发环境:

  1. 显示环境: 浏览器
  2. 编辑环境:......(记事本、各大编辑器)

三、CSS编写规则:

  1. 目录结构命名规则:
    存放css文件一般被命名为:stylecss
  2. 样式文件命名规则:
    .........
  3. 样式的命名规则:
    由:小写英文字母下画线组成,必须以字母开头不能纯数字,且要有意义(做到“见其名,知其意”)
  4. CSS代码注释
    作用:增强可读性
    ①结构性注释:
    /*header(定义网页头部区域)--------------*/

    ②提示性注释:
    .new_list li span{
    float:left;/*这里写注释...*/
    width:80px;/*这里写注释...*/
    color:#999;/*这里写注释...*/
    }

四、CSS的引用方法

  1. 定义行内样式
    <标签 style="属性:属性值;属性:属性值;...">
  2. 定义内部样式表
    <style type="text/css">
    <!--选择符1{属性:属性值;属性:属性值;...}-->
    <!--选择符2{属性:属性值;属性:属性值;...}-->
    <!--选择符3{属性:属性值;属性:属性值;...}-->
    <!--选择符4{属性:属性值;属性:属性值;...}-->
    //<!--...-->的作用是应对旧版本浏览器不支持CSS的情况,把<style>...</style>的内容以注释的形式表示,不支持css的浏览器会自动略过
    </style>

     

五、链入外部样式表

  1. 用<link>标签必须放到页面的<head>...</head>标签对内,格式:
    <head>
    ...
    <link rel="stylesheet" href="外部样式表示文件名.css" type="text/css">
    ...
    </head>
  2. 样式表文件的格式
    选择符1{属性:属性值;属性:属性值;...}
    选择符2{属性:属性值;属性:属性值;...}
    ...
    选择符n{属性:属性值;属性:属性值;...}
  3. 导入外部样式
    <style type="text/css">
    <!-- 
    @import url{"外部样式表的文件名1.css"}
    @import url{"外部样式表的文件名2.css"}
    其他样式表的声明
    -->
    </style>

六、CSS语法基础

CSS样式规则:

  1. 样式规则
    样式规则表的每条规则都有两个主要部分:选择器声明
    selector{attribute:value}/*(选择符{属性:属性值})*/
  2. 选择符的类型
    CSS选择符包括基本选择符符合选择符通用符选择符特殊选择符

基本选择符:

  1. 标签选择符
    定义时直接使用元素本身
    E{
      /*css 代码*/
    }
    //其中E表示网页元素(Element)。例如以下代码表示标签选择符
    body{
      font-size:13pt;
    }
    div{
      boder:3px double #f00;
    }
  2. class选择符
    <style type="text/css">
    <!--
      .类名称1{属性:属性值;属性:属性值;...}
      .类名称2{属性:属性值;属性:属性值;...}  
      .类名称...{属性:属性值;属性:属性值;...}  
      .类名称n{属性:属性值;属性:属性值;...}
      -->
    //示例:
    .blue{
      color:#00f;/*class类blue定义为蓝色文字*/
    }
    p{/*p标签选择符*/
      boder:2px dashed #f00;/*边框为2px红色虚线*/
      width:280px;/*所有p元素定义宽度为280像素*/
    }  
    </style>
  3. id选择符
    <style type="text/css">
    <!--
    #id名1{属性:属性值;属性:属性值;...}
    #id名2{属性:属性值;属性:属性值;...}
    #id名...{属性:属性值;属性:属性值;...}
    #id名n{属性:属性值;属性:属性值;...}
    -->
    //例如:
    #top{
      line-height:20px;/*定义行高*/
      margin:15px 0px 0px 0px;/*定义外边距*/
      font-size:24px;/*定义字号大小*/
      color:#f00;/*定义字体颜色*/
    }
    </style>
  4. 复合选择符
    (1)“交集”选择符
    “交集选择符”构成:** 由两个选择符直接连接构成:如p里面有class=style,可以用:
    p {
    //内容
    }
    或
    .style{
    //内容
    }

    (2)“并集”选择符
    如:有:h1h2h3

    h1,
    h2,
    h3{
    //h1、h2、h3属于并集
    }
  5. 通配符选择符
    如:
    *{
    /*代表所有标签,
    一般用于设置边距*/
    margin:0px;
    padding:0px;
    }

    也可以直接对特定元素的子元素应用样式:
    p段落的文字样式:

    p{
      //样式
    }

    p段落里所有子元素样式:

    p *{
      //样式
    }
  6. 特殊选择符
    (1)伪类选择符:
    如<a>标签:
    a:hover{} /*定义鼠标悬停在超链接样式*/
    a:link{} /*定义未访问超链接样式*/
    a:visited{} /*定义已访问超链接样式*/
    a:active{} /*定义被激活的超链接样式*/

    (2)伪元素

    :first-letter /*特殊的样式添加到文本的首字母*/
    :first-line /*特殊的样式添加到文本首行*/
    :before /*在某元素之前插入内容*/
    :after /*在某元素之后插入内容*/

七、CSS的属性单位

  1. 长度
  2. 色彩

八、文档结构

  1. css采用html文档结构来决定其样式的应用
  2. 继承:子元素继承父元素的属性值
  3. 样式表的层叠特殊性重要性
       ①层叠:继承父元素属性使用自定义的已有属性
       ②特殊性:通配符特殊值为0,基本选择符有特殊值为1,class类选择器有特殊值为10,id为100,行内样式style=""为100,越大越被优先采用
       ③重要性:可以用!important来提升样式优先权,则可以使低优先值进行提升优先权(不显示 -> 显示)
  4. 元素类型:
       ①块级元素:display:block
       块级元素宽度为100%,占据一行,后附带隐藏换行符,如:标题、p、表格、li、分区div、body都是块级元素
       ②行级元素:dispaly:inline
       元素前后没有换行符,也没有高度和宽度,也没有固定形状,如:span、a、img、表单元素等
       ③列表项元素:dispaly:listitem
       listitem属性值标识列表项目,实质也是块状显示,不过是一种特殊的块状类型,增加了缩进项目符合
       ④隐藏元素:dispaly:none
       none属性标识隐藏取消盒模型,所包含的内容不会被浏览器解析和显示
       ⑤其他分类
       inline-table、run-in、table、table-caption、tabel-cell、table-column、table-column-group、table-row、table-row-group、inhert等
       
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »