CSS学习笔记第2天

网站建设 · 2020-10-21
1.2.2 CSS基本语法84eIT米工网
CSS样式格式84eIT米工网
选择器{声明1;声明2}84eIT米工网
例:body{font-size:14px;color:#000;}84eIT米工网
一个或多个样式构成样式表,样式表包括内部样式表和外部样式表,内部样式表放在文档中通过style标签进行标识,外部样式表放在外部文件中保存为.css也称为样式表文件,通过link或import导入到文档中。84eIT米工网
注意:声明紧跟选择器,并被{}包围,声明之间用;属性值和属性名之间可以有空格,但是选择符和{}之间不能有空格。84eIT米工网
84eIT米工网
1.2.3 设计第一个实例
 
    <style type="text/css">
    div{
        width:200px;
        height:200px;
        border:solid 2px blue;
        float:left;
        margin:4px;
    }
    .green{
        background:green;
    }
    .red{
        background:red;
    }
    </style>
84eIT米工网
1.3.1 CSS选择器概述84eIT米工网
CSS语言有两个基本功能,第一是匹配,第二是渲染,当浏览器解析CSS样式时,首先要确定那些元素需要渲染,也就是说匹配那些html元素,这个操作由CSS中的选择器负责完成,只有匹配到具体的对象之后,浏览器根据CSS选择器样式声明确定选择效果并呈现在页面中。84eIT米工网
CSS选择器包括4大类:84eIT米工网
1.标签选择器84eIT米工网
2.ID选择器84eIT米工网
3.类选择器84eIT米工网
4.特殊选择器(包含子选择器、相邻选择器、包含选择器等)84eIT米工网
84eIT米工网
1.3.2 标签选择器84eIT米工网
标签选择器,一般用来匹配特定的元素,比如段落文本p元素,超链接a元素。84eIT米工网
p{color:black}84eIT米工网
a{text-decoration:underline;}84eIT米工网
h1{font-weight:bold;}84eIT米工网
标签选择器的优点:能够快速的匹配页面中不同的标签,这样可为页中不同的标签统一样式,比如,所有的段落文本都是首行缩进2个字,所有的标题都是加粗显示,所有的超链接都显示下划线,这样可快速的对页面样式进行统一。84eIT米工网
标签选择器的缺点:不能够差异化设计,容易相互干扰。84eIT米工网
在什么情况下使用标签选择器?84eIT米工网
1.定义页面默认样式,可使用标签选择器。84eIT米工网
2.希望统一文档的标签样式,可使用标签选择器。