CSS用来美化页面,页面布局。也是一种标记语言。
HTML的局限性:只关注内容的语义,没有外观设计。
CSS语法规范:由两部分组成:选择器以及一条或多条声明。
简单理解:选择器 {样式}
给谁改样式 {改什么样式}
CSs样式要写在<style></style>里面。
Css代码风格:
样式格式书写
(1)紧凑格式:
(2)展开格式:更提倡这种
样式大小书写:通常小写。
空格规范:属性值前面,冒号后面保留一个空格。选择器和大括号中间保留一个空格。
选择器分为基础选择器和复合选择器
基础选择器由单个选择器组成,包含:标签选择器、类选择器、id选择器、通配符选择器。
标签选择器:标签名作为选择器。
类选择器:可以单独选择其中一个或者某几个标签,可以实现差异化选择。
利用class属性来调用class类。
类选择器口诀:样式点定义,结构类调用。一个或多个,开发最常用。
类选择器-多类名:一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这些标签。可以把一些标签元素相同的部分放到一个类里面。
Id选择器:可以为标有特定标签的元素指定特定的样式。Css中通过#来定义。
Id选择器口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用。
通配符选择器:使用*定义,表示选取页面中所有的元素标签。
不需要调用,自动给所有的元素使用样式。
CSS字体属性:定义字体系列、大小、粗细、和文字样式
字体大小:
标题标签特殊,需要单独制定字体大小。
字体粗细:
实际开发中更提倡用数字表示字体的粗细。数字不加单位。
文字样式:
字体复合属性:其实就是简写的方式。
顺序不能更改,属性间以空格隔开。
字体属性总结:
CSS的文本属性:如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等外观样式。
文本颜色:
对齐文本:用text-align来设置水平对齐方式。
装饰文本:如添加下划线、删除线、上划线等。通过text-decoration来设置
文本缩进:将段落的首行缩进,使用text-indent设置。
行间距:用line-height来设置。
CSS的引入方式:
内部样式表:把CSS写到html的页面内部,将css代码抽取出来,单独放到<style>标签里面。
行内样式表:适用于修改简单样式。如:
外部样式表:将样式单独写道CSS文件中,然后将CSS引入到页面中使用。
想让图片居中对齐,其实是对其父标签居中对齐。
Chrome调试工具:
打开调试工具:打开chrome浏览器,按下F12,或者右击页面空白处,点击检查。
使用调试工具:
Emmet语法:前身Zen coding,可以使用缩写来提高编写速度。
复合选择器:由两个或者多个基础选择器,通过不同的方式组合而成。常用的有:后代选择器、子选择器、并集选择器、伪类选择器等。
后代选择器(重要):又称为包含选择器,可以选父元素里面的子元素。
子选择器:选择某元素的最近一级子元素。
并集选择器:可以选择多组标签,并为他们定义同样的样式,用于集体声明。英文逗号分隔。任何形式的选择器都可以作为并集选择器的一部分。
伪类选择器:向某些选择器添加特殊的效果,如给链接添加特殊效果,或者选择第一个,第n个元素。用冒号表示(:),如:hover、:first-child。种类很多,如链接伪类,结构伪类、表单伪类。
链接伪类:
链接伪类注意事项:
为了确保生效,按照LVHA的顺序声明:
:linked :visited :hover :active
由于a链接在浏览器中具有默认样式,通常我们需要给链接单独制定样式
实际开发中的写法:
:focus伪类选择器:选取获得焦点的表单元素
复合选择器总结: