第四章初始CSS3预习笔记
第四章
初始CSS3预习笔记
一:
1: 什么是CSS?
全称是层叠样式表;/通常又称为风格样式表,.他是用来进行网页风格设计的;
2:CSS的优势:
1>内容以表现分离,即使用u前面学习的HTML语言制作网页 ,使用CSS设置网页样式,风格,并且css样式单独存在一个文件夹里..这样.HTML文件`引用的css文件就可以了 网页的内容 与表现就可以分离了,便于后期css的使用 ;
2>表现的统一;
3>丰富的样式 ,使得页面布局更加灵活.
4>减少网页的代码量,提高网页的浏览速度.节省网络宽带;]
5>运运独立页面的css.提高用户的体验;
3:css3的基本语法:
1>css规则由两部分组成:选择器和声明
2>声明必须放在大括号里({}).并且声明可以是一条或者多条
3>每条的声明 有一个属性和值组成,用冒号分开.每条的语句以英文分号结尾
4:认识<style>标签
1>行内样式
2:内部样式表
3:外部样式表
1>链接外部样式表
语法:
<head> ...... <link href ="style.css"rel ="stylesheet"type ="text/css"/> ....... </head>
2.导入外部样式表:
语法:
<head> ...... <style> <!-- @import url("common.css"); --> </style> </head>
5:链接式与导入式的区别:
(1):<link/>标签属XHTML范.而@import是出生时.1中的特有的;
(2):使用<link/>链接的css是客户端浏览网页时先将外部css文件加载到网页中,在进行编译显示,所以显示出来的网页与用用户预期的效果一样
(3):使用2imput导入的css文件.客户端在浏览网页的时候先将HTML结果显示出来.在把外部css文件加载到网页中去,当最终的效果与使用的<link/>链接文件效果不一样
6:css3的选择器:
1>标签选择器
2>类选择器
css选择器的命名规则:
1>使用英文字母小写
2>不要和ID选择器同名
3>使用具有与语义化的单词命名
4>长名称或者词组可以使用驼峰命名方式的选择器命名
7:id选择器的使用方法与类的选择器基本相同,不同之处在于ID选择器的只能在HTML页面中只能使用一次,ID选择器只能用一次.也就是说在同一个的页面中同一个id属性只能用一次,属性只能设计一次.而类的选择可以在页面中多次使用.
8:CSS的高级选择器:
1>层次选择器
.层次选择器语法:
EF E>F E+F E~F
注意:通用选择器的是E元素相临的后面元素的F.是一个或者多的元素.相邻选择器选择中的仅是与E相邻的并且紧邻的兄弟元素F,其选中的仅是一个元素;
2>结构伪类选择器:可以将一些不存在的HTML当作独立元素的来定位,或者是找到无法使用的其他简单选择器就能定位在切实的实际元素中
属性选择器的语法:
E[attr] 选择匹配具有属性的attr的E元素;
E[attr=val] 选择匹配具有属性的E元素.并且属性值为val(其中val 区分大小写)
E[atrt^ =val] 选择匹配的元素E.且E元素定义了属性attr .并且属性值为va开头的任意的字符串
E[attr& =val] 选择匹配的元素E.且E元素定义了属性attr .l.并且属性值为val结尾的任意的字符串
E[attr*=val] 选择匹配的元素E.且E元素定义了属性attr .其属性值包含了val
总结
1:css 的语法规则 :使用<style>标签的引入css 样式
2:在HTML中引入css样式的三种方法分别是:
1>行内样式
2>内部样式表
3>外部样式表
其中外部样式表使用<link/>标签链接外部的css 文件 .css样式的优先级依据就近原则
3:css3的基本选择器包括标签选择器,类选择器和 ID 选择器
4:css3的高级选择器包括层次选择器,结构伪类选择器 .属性选择器
