一,css语法规范
css规则由两个主要的部分构成:选择器以及一条或多条声明。
h1 { color: red;
font-size: 25px;
}
包括选择器,属性及属性值;
二,css基础选择器
css分为基础选择器与复合选择器,其中基础选择器有标签选择器,类选择器,id选择器和通配符选择器。
1,标签选择器
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。
2,类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
.类名 {
属性1:属性值1;
......
}
语法:结构需要用class属性来调用class类的意思。
<div class='red'>变红色</div>
类选择器使用点“ . ”进行标识,后面紧跟类名(自定义)。不要使用纯数字,中文等命名,尽量使用英文字母来表示。长名称或词组可以使用中横线来为选择器命名。
类选择器-多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。
3,id选择器
ID选择器可以为标有特定ID的HTML元素指定特定的样式。HTML元素以ID属性来设置ID选择器,css中ID选择器以“ # ”来定义。
#id名 {
属性1:属性值1;
...
}
ID选择器和类选择器的区别:
1,类选择器好比人的名字,可以有多个名字;
2,ID选择器好比人的身份证号码,是唯一的,不能重复。
3,ID选择器和类选择器最大的不同在于使用次数上;
4,类选择器在修改样式中用的最多,ID选择器一般用于页面唯一性的元素上。经常和javascript搭配使用。
4,通配符选择器
在css中,通配符选择器使用“ * ”定义,它表示选取页面中所有元素(标签)。
* {
属性1:属性值1;
...
}
通配符选择器不需要调用,自动就给所有的元素使用样式。
5,总结
标签选择器可以选出所有相同的标签,比如p,但是不能差异化选择,使用情况较多。类选择器可以选出一个或者多个标签,可以根据需求选择,使用情况非常多。ID选择器一次只能选择一个标签,ID属性只能在每个HTML文档中出现一次。通配符选择器可以选择所有的标签,选择的太多,有时候部分不需要,在特殊情况下使用。如果是修改样式,类选择器使用最多。
三,css字体属性
Css字体属性用于定义字体系列,大小,粗细和文字样式。
Css使用font-family属性定义文本的字体系列。
p { font-family:"微软雅黑";}
div { font-family: Arial,"Microsoft Yahei","微软雅黑";}
需注意各种字体之间必须使用英文状态下的逗号隔开,一般情况下,如果有空格隔开的多个单词组成的字体需加引号。尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正常显示。
Css使用font-size属性定义字体大小。
p {
font-size: 20px;
}
px(像素)大小是我们网页的最常用的单位。谷歌浏览器默认的文字大小为16px,不同浏览器可能默认显示的字号大小不一致。我们需给一个明确值大小。可以给body指定整个页面文字的大小。
Css使用font-weight属性设置文本字体的粗细。
p {
font-weight: bold;
}
normal为默认值,不加粗的。bond为定义粗体,加粗的。400等同于normal,而700等同于bond;
Css使用funt-style属性设置文本的风格
p {
font-style:normal;
}
normal为默认值,浏览器会显示标准的字体样式。italic浏览器会显示斜体的字体样式。平时我们很少给文字加斜体,反而要给斜体标签i,em改为不倾斜字体。
字体属性可以以以下综合格式来写,更节约代码。注意不能更换顺序,并且各个属性间以空格隔开。不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。
四,css文本属性
Css text属性可定义文本的外观,比如文本的颜色,对齐文本,装饰文本,文本缩进,行间距等。
Color属性用于定义文本的颜色,可以由预定义的颜色值,十六进制,rgb代码来表示。
text-align属性用于设置元素内文本内容的水平对齐方式;Left为左对齐,right为右对齐,center为居中对齐。
text-decoration属性规定添加到文本的修饰,可以给文本添加下划线,删除线,上划线等。none为默认没有装饰线,underline为下划线,链接a自带下划线。Overline为上滑线,line- through为删除线。
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。通过设置该属性,所有元素的第一行都可以缩进一个给定的长度。甚至该长度可以是负值,em是一个相对单位,就是当前元素一个文字的大小。如果当前元素没有设置大小,则会按照父元素的一个文字大小。
p {
text-indent: 10px;
}
p {
text-indent: 2em;
}
line-height属性用于设置行间的距离,可以控制文字行与行之间的距离。
五,css的三种样式表
按照Css样式书写的位置,Css样式表可以分为3大类,行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)。
内部样式表是写到HTML页面内部,是将所有的css代码抽取出来。单独放到一个<style>标签中,<style>标签理论上可以放在HTML文档的任何地方。但一般会放在文档的<head>标签中,通过此种方式可以方便当前整个页面中的元素样式设置。同时代码结构清晰,但是并没有实现结构与样式的完全分离。使用内部样式表设定css通常也被称为嵌入式引入。
行内样式表是在元素标签内部的style属性中设定css样式,适合于修改简单样式。Style其实就是标签的属性,在双引号中间写法要符合css规范。由于书写频繁,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加简单样式的时候可以考虑使用。
实际开发都是外部样式表,适合于样式比较多的情况,核心是样式单独写到css文件中,之后把css文件引入到HTML页面中使用。引入外部样式表分为两部,新建一个后缀名为.css的样式文件,把所有css代码都放入此文件中。在HTML页面中使用link标签引入这个文件。
六,css的复合选择器
在Css中可以根据选择器的类型把选择器分为基础选择器和复合选择器。复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。常用的复合选择器包括后代选择器,子选择器,并集选择器,伪类选择器等。
1,后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素,其写法就是把外层标签写在前面。内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代。
ul li { 样式声明 }
2,子选择器
子选择器只能选择作为某元素的最近一级子元素。
div > p {样式声明}
3,并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。并集选择器是各选择器通过英文逗号连接成,任何形式的选择器都可以作为并集选择器的一部分。
ul,div {样式声明}
4,伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊的效果,或选择第一个,第n个元素,伪类选择器书写,最大的特点是用冒号表示。比如:hover。
链接选择所有未被访问的链接:a:link;
选择所有已被访问的链接:a:visited;
选择鼠标指针位于其上的链接:a:hover;
选择活动链接,鼠标按下未弹起的链接:a:active;
请按照lvha的顺序声明。
5,focus伪类选择器
Focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标,一般情况input类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
input:focus {
background-color:yellow;
}
七,css的元素显示模式
元素显示模式就是元素以什么方式进行显示。比如div自己占一行,比如一行可以放多个span, HTML元素一般分为块元素和行内元素两种类型。
1,块元素
常见的块元素有h1-h6,p, div,ul,li等。其中div标签是典型的块元素。块级元素的特点,比较霸道,自己独占一行,高度,宽度,外边距以及内边距都可以控制。宽度默认是容器的百分之百,是一个容器及盒子里面可以放行内或者块级元素。注意文字类的元素内不能放块级元素。
2,行内元素
常见行内元素有啊,strong,b,em,i,del,s,ins,u,span等。
特点:
相邻行内元素在一行上,一行可以显示多个,高宽,直接设置是无效的。默认宽度就是它本身内容的宽度,行内元素只能容纳文本或其他行内元素。注意链接里面不能再放链接,特殊情况链接a里面可以放块级元素,但是给a转换一下块级模式最安全。
3,行内块元素
其中img/,input/,td,他们同时具有块元素和行内元素的特点,有些资料称他们为行内块元素。
特点:
和相邻行内元素在一行上,但是他们之间会有空白,一行可以显示多个。默认宽度就是它本身内容的宽度,高度行高,外边距以及内边距都可以控制。