核心提示:css全称为层叠样式表(风格样式表)css的优点1 内容与表现分离2表现的统一3丰富的样式4减少网页的代码量5运用独立于页面的CSS,还有利于网页被搜索引擎收录。css的基本语法CSS有两部分组成,选...
css全称为层叠样式表(风格样式表)
css的优点
1 内容与表现分离
2表现的统一
3丰富的样式
4减少网页的代码量
5运用独立于页面的CSS,还有利于网页被搜索引擎收录。
css的基本语法
CSS有两部分组成,选择器和声明
声明必须放在大括号里,声明可以是一条或多条
每条声明是有一个属性和值,属性和值用冒号分开
h1{font-size:12px;
color:#F00;}
其中h1是选择器
font-size和color是样式属性
12px和#F00是值
用<style></style>标签引入CSS样式
style标签放在body标签里
css样式表有三种方式
行内样式,内部样式,外部样式
行内样式
<h1 style="color:red;">h1标签的值</h1>
简单说就是把style放在标签里标签后面是样式属性和值 内部样式 就是把CSS代码写在<head>标签里, h1{font-size:14px;color:red;} 就是把标签拿出来放在<style>标签里 外部样式 分为链接式和导入式 需要新建一个CSS文本文件把CSS样式放在文本里 链接式是通过<link href="需要引入的CSS文本文件"rel="stylesheet" type="text/css"/>来引入 导入式是通过@import url(引入的CSS文本文件) 上面两个不用写在<style>标签里只要在<head>标签里即可 两个的区别 1<link>是xhtml的范畴,@import是CSS2.1中特有的 <link>网速慢时先显示CSS样式在显示HTML页面 @import相反所以,一般常用链接式 优先级 行内样式>内部样式>外部样式 还要遵循就近原则 CSS的基本选择器标签选择器 h3{ font-xize:10px; color:red; } 就是单独选择标签然后用大括号括起来,里面写样式属性和值 类选择器 需引入class标签,class标签要设在元素里面给class起名,起的名字用.class表示 .表示类选择 选择器的规范 1使用英文字母小写 2不要和ID选择器同名 3是由具有语义化的单词命名 4长名称或词组可以使用驼峰命名方式命名选择器
.类名称就是在类里起的名字{ font-xize:10px; color:red; 大括号里风格 } ID选择器 就是在元素里设置ID 只能使用一次 ID用#号表示 #ID的名子{ font-xize:10px; color:red; } 选择器优先级 ID选择器>class选择器>标签选择器 高级选择器 层次选择器 E F后代选择器:表示E标签里的所有F标签 E>F子选择器:表示E标签里的所有F标签 E+F相邻兄弟选择器;同级元素里的相邻元素 E~F通用兄弟选择器;统计元素后相同元素 结构伪类选择器 E:first-child 作为父元素里是E的第一个子元素 E:last-child作为父元素里是E的最后一个子元素 E F:nth-child(n)作为父元素是E的第n个子元素 E:first-of-type先找到是类型E的第一个元素 E:last-of-type先找到是类型E的最后一个元素 E:nth-of-type(n)先找到是类型E的第n一个元素 使用多个选择器响应同一种样式,中间用逗号隔开 E F:nth-child(n)在父级里从一个元素开始查找,不分类型 E F:nth-of-type(n)在父级里先看类型,再看位置 属性选择器 E[attr]选择匹配具有属性attr的E元素 E[attr=val]选择匹配具有attr的E元素,并且属性值为val(其中val区分大小写) E[attr^=val]选择匹配元素E,且E元素定义了属性attr,其属性值是一val开头的任意字符串 E[attr$=val]选择匹配元素E,且E元素定义了属性attr,其属性值是一val结尾的任意字符串
E[attr*=val]选择匹配元素E,且E元素定义了属性attr,其属性值包含了“val”,换句话说,字符串val与属性值中的任意位置相匹配。