定义
CSS通常称为CSS样式表或层叠样式表,主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局等外观显示样式。
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
语法
主要构成:选择器以及一条或多条声明。
声明由一个属性和值组成。
属性:设置的样式属性,每一个都拥有一个值,属性和值被冒号隔开。
选择器:需要改变样式的html元素。
创建
分为三种:
1.内部样式表`
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
</style>
</head>`
2.内联样式
<div style="width:200px;height:100px;border:1px solid black;"></div>
3.外部样式表
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
样式表的区别
优先级:2>1>3。
1.行内样式表 :
优点 :书写方便;
缺点 :没有实现样式和结构相分离;
控制范围:控制一个标签。
2.内部样式表:
优点:部分结构和样式相分离;
缺点:没有彻底分:
控制范围:控制一个页面。
3.外部样式表:
优点:完全实现结构和样式相分离;
缺点:需要引入;
控制范围 控制整个站点。
id和class选择器
id选择器:可以为标有id的HTML元素制定特定的样式,id属性和身份证一样具有唯一性 。
HTML元素以 id 属性来设置 id 选择器, id 选择器以 “#” 来定义。注意: id 属性不能以数字开头。
语法:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
class选择器:
class选择器用于描述一组元素的样式,也叫类选择器。
class可以在多个元素中使用,并且一个元素也可以指定多个类名。
在 CSS 中,类选择器以一个点 “.” 号来定义。
同样的类名的第一个字符也不能使用数字。
语法:
类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素选择器
是最常见的css选择器,也叫标签选择器,是html中元素最基本的选择器
语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
优点是快速为页面中同类型的标签统一样式。
但这个优点同样也是它的缺点,不可以再设计差异化样式。