什么是CSS
Cascading Style Sheet 层叠样式表
表现HTML文件样式的语言 u包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS的优势
内容与表现分离
网页的表现统一,容易修改
丰富的样式,使得页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录
基础语法
选择器{
声明1;
声明2;
…
}
h1{
font-size:10px;
color:blue;
}
最后一个声明后的“;”可写可不写,但是建议写上
引入CSS的方式
一.行内样式
使用style属性引入CSS样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color:red; font-size: xx-large ">行内样式</h1>
</body>
</html>
二.内部样式表
CSS代码写在的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内部样式表</title>
<style>
h1{
font-size: xx-large;
color: red;
}
h2{
font-family: 楷体;
color:blue;
}
</style>
</head>
<body>
<h1>学习CSS</h1>
<h2>使用不同的方法</h2>
</body>
</html>
三.外部样式表
链接式
导入式
CSS文件
h1{
font-size: xx-large;
font-family: 华文行楷;
}
h2{
color:royalblue;
font-max-size: xx-large;
}
链接式:使用link标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link rel="stylesheet" href="../resources/css/测试.css">
</head>
<body>
<h1>学习CSS</h1>
<h2>使用不同的方法</h2>
</body>
</html>
导入式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<style>
@import url("../resources/css/测试.css");
</style>
</head>
<body>
<h1>学习CSS</h1>
<h2>使用不同的方法</h2>
</body>
</html>
这两者的区别:
标签属于XHTML,@import是属于CSS2.1使用链接的CSS文件先加载到网页当中,再进行编译显示
使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页 当中 @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
CSS样式优先级(就近原则)
行内样式 > 内部样式表 > 外部样式表
CSS基础选择器3-1
标签选择器
HTML标签作为标签选择器的名称
<h1/ >…< h6 >、< p >、< img/>
在这上面的代码中所用到的全都是标签选择器
类选择器
<标签名 class=“类名”>标签内容</标签名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.otto{
color: blue;
font-size: xx-large;
}
</style>
</head>
<body>
<h1 class="otto">学习CSS</h1>
</body>
</html>
ID选择器
<标签名 id="">标签内容</标签名>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#otto{
color: black;
font-size: xx-large;
}
</style>
</head>
<body>
<h1 id="otto">学习CSS</h1>
</body>
</html>
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
注意: ID选择器的id不能以数字开头
基本选择器的优先级:
ID选择器>类选择器>标签选择器
基本选择器不遵循 “ 就近原则 ”
CSS高级选择器3-1
层次选择器
选择器 | 类型 | 功能描述 |
---|---|---|
E F | 后代选择器 | 选择匹配的F元素,且匹配的F元素被包 含在匹配的E元素内 |
E>F | 子选择器 | 选择匹配的F元素,且匹配的F元素是匹 配的E元素的子元素 |
E+F | 相邻兄弟选择器 | 选择匹配的F元素,且匹配的F元素紧位 于匹配的E元素后面 |
E~F | 通用兄弟选择器 | 选择匹配的F元素,且位于匹配的E元素 后的所有匹配的F元素 |
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
p,ul{border: blue 1px solid;}
body p{
background: red;
}
</style>
</head>
<body>
<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
子选择器
<style>
p,ul{border: blue 1px solid;}
body>p{
background: red;
}
</style>
相邻兄弟选择器
<style>
p,ul{border: blue 1px solid;}
.aaa+p{
background: yellow;
}
</style>
通用兄弟选择器
<style>
p,ul{border: blue 1px solid;}
.aaa~p{
background: yellow;
}
</style>
CSS高级选择器3-2
结构伪类选择器
选择器 | 功能描述 |
---|---|
E:first-child | 作为父元素的第一个子元素的元素E |
E:last-child | 作为父元素的最后一个子元素的元素E |
E F:nth-child(n) | 选择父级元素E的第n个子元素F,(n可以是1、2、3),关 键字为even、odd |
E:first-of-type | 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type | 选择父元素内具有指定类型的最后一个E元素 |
E F:nth-of-type(n) | 选择父元素内具有指定类型的第n个F元素 |
E:first-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
p,ul{border: blue 1px solid;}
ul li:first-child{
background: red;
}
</style>
</head>
<body>
<p class="aaa">1</p>
<p id="a">2</p>
<p>3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
E:last-child
<style>
p,ul{border: blue 1px solid;}
ul li:last-child{
background: red;
}
</style>
E F:nth-child(n)
<style>
p,ul{border: blue 1px solid;}
ul li:nth-child(1){
background: red;
}
</style>
E:first-of-type
<style>
p,ul{border: blue 1px solid;}
body p:first-of-type{
background: black;
}
</style>
E:last-of-type
<style>
p,ul{border: blue 1px solid;}
body p:last-of-type{
background: black;
}
</style>
E F:nth-of-type(n)
<style>
p,ul{border: blue 1px solid;}
p:nth-of-type(2){
background:black;
}
</style>
CSS高级选择器3-3
属性选择器
属性选择器 | 功能描述 |
---|---|
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与属性值中的任意位置相匹配 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a[id]{
background: black;
}
a[id=name]{
font-size: xx-large;
}
a[href^="https"]{
font-family: 楷体;
}
a[href$="png"]{
background: red;
}
a[class]{
color: white;
}
a[href*="."]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links" id="name">学习</a>
<a href="" class="links">睡觉</a>
<a href="/1.png">玩耍</a>
<a href="/1.jpg" class="links">游泳</a>
<a href="/1.png" id="apple">跑步</a>
<a href="https://blog.kuangstudy.com" class="links">打篮球</a>
<a href="aaa">看电影</a>
<a href="abc.doc" class="links">上网</a>
<a href="abcd.doc" id="">旅游</a>
</p>
</body>
</html>