<!-- 规范,<style>可以编写css的代码,每一个声明用分号结尾 语法: 选择器{ 声明1; 声明2; 声明3; } -->html也可应用 link+tab关联css样式表
css的优势
1,内容与表现分离
2、页面结构表现统一,可以实现复用
3、样式十分丰富
4、建议使用独立于html的文件
5、利用SEO,容易被搜索引擎收录
css的三种表现形式
1、行内样式,在标签元素中,编写一个style属性,编写样式即可
<strong style="color: crimson">I love you</strong>
2、内部样式,在html的<head>里编写style
3、外部样式,新建一个css文件,用link+tab关联
选择器
作用 : 选择页面上的某一个或者某一类元素
基本选择器
不遵循就近原则
id选择题>class选择器>标签选择器
1、标签选择器
会选择到页面上所有此类型的标签
缺点:如果想要第一个h1变色,第二个不变色,做不到
2、类选择器
html
<h1 class ="LC"> 一级标签</h1> <h1 class="L">我是一级</h1> <h1 class="ye">老子是一级</h1>
css
.LC{ color: #6476ed; } .L{ color: seagreen; } .ye{ color: gold; }
类选择器的格式: .class的名称
好处:可以多个标签归类,是同一个class,可以复用
3、id选择器
id必须保证全局唯一,且不能用数字,用#引用
层次选择器
1、后代选择器
某个元素的后面 祖爷爷、爷爷、爸爸、你
后代选择器 body p{ background: darkolivegreen; }
2、子选择器
一代 儿子 ">"符号
body>p{ background: gold; }
3、相邻兄弟选择器
同辈,只有一个 相邻向下
.active+p{ background: blueviolet; }
4、通用选择器
通用兄弟选择器,当前选中元素的所有向下兄弟选择器
结构伪类选择器
伪类:条件判断 带冒号
/*ul的第一个子元素*/ /*避免使用id选择器,类选择器*/ ul li:first-child{ background:brown; }
/*只选择p1:定位到父元素找到第一个子元素*/ p:nth-child(1) { background: blueviolet; }且如果body中第一个元素不是p,则上式找不到p1,
而要用下式
p:nth-of-type(2){ background: aqua; }上式用顺序,下式用类型
属性选择器
属性名: 属性名=属性值(正则)
= 绝对等于
*=包含这个元素
^= 以这个元素开头
$=以这个元素结尾
[ ]