初识CSS
什么是CSS
- CSS的概念
Cascading Style Sheet 层叠样式表
表现HTML文件样式的语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
聊聊网页中的CSS
在这里插入图片描述
CSS的发展史
1996年 CSS1.0
1998年 CSS2.0
融入了DIV+CSS的概念,提出了HTML结构与CSS样式表的分离
2004年 CSS2.1
融入了更多高级的用法,如浮动,定位等。
2010年 CSS3.0
它包括了CSS2.1下的所有功能, 是目前最新的版本, 它向着模块化的趋势发展,又加了很多使用的新技术, 如字体、 多背景、 圆角、 阴影、 动画等高级属性,但是它需要高级浏览器的支持。 由于现在IE 6、 IE 7使用比例已经很少, 对市场企业进行调研发现使用CSS3的频率大幅增加, 学习CSS3已经成为一种趋势.
CSS的优势
内容与表现分离
网页的表现统一 , 容易修改
丰富的样式 , 使得页面布局更加灵活
减少网页的代码量 , 增加网页的浏览速度 , 节省网络带宽
运用独立于页面的CSS , 有利于网页被搜索引擎收录
CSS的基础语法
选择器{
声明1;
声明2;
...
}
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: rgba(224, 183, 134, 0.69);
}
h2{
font-size: 200px;
}
</style>
</head>
<body>
<h1>你是谁啊</h1>
<h2>我是你爸爸</h2>
</body>
</html>
引入CSS的方式
1.行内样式
使用style属性引入CSS样式
秦
2.内部样式表
CSS代码写在<head的<style标签中
3.外部样式表
链接式
导入式
案例一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式表
需要使用style标签
格式 :
选择器 {
属性 : 属性值
}
-->
<style>
a{
font-size: 50px;
}
</style>
</head>
<body>
<!--行内样式
style属性引入 ,
行内样式如果要添加多个样式 , 中间使用分号隔开
-->
<h1 style="color: #96ffe6">Hello,css</h1>
<p style="color: #ff5f5d;font-weight: bold">Hello,css</p>
<p>Hello,css</p>
<hr/>
<a href="">Goodbye,world</a>
</body>
</html>
案例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--第三种导入方式:外部导入式
需要使用 link标签
-->
<!--<link rel="stylesheet" href="../resources/css/Style.css">-->
<style>
@import url("resources/css/Style.css");
</style>
</head>
<body>
<div>
认真学习的样式很Cool
</div>
</body>
</html>
其中Css文件内为:
div{
color: #ff5f5d;
font-size: 100px;
}
span{
color: #ff5f5d;
font-size: 50px;
}
链接式与导入式的区别
<link/标签属于XHTML,@import是属于CSS2.1
使用<link/链接的CSS文件先加载到网页当中,再进行编译显示
使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
CSS样式优先级(就近原则)
行内样式 > 内部样式表 > 外部样式表
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="resources/css/Style.css">
<style>
span{
color: blue;
font-family: 楷体;
}
</style>
</head>
<body>
<span style="color: green">
IT梦想
</span>
</body>
</html>
CSS基础选择器
1.标签选择器
uHTML标签作为标签选择器的名称
<h1…<h6、<p、<img/
2.类选择器
类选择器
<标签名 class= “类名称”>标签内容</标签名>
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器
思考 : 需要一类 ? 类在标签中定义, 使用class属性
然后使用类选择器选择到指定的标签元素
.类名称{
属性:属性值
}
*/
.a{
font-family: 宋体;
}
.b{
font-style: italic;
}
</style>
</head>
<body>
<p class="a">来西部开源</p>
<a href="" class="a">成就IT梦想</a>
<div class="a">好好学习,天天向上</div>
<span class="b">cool</span>
<br>
<qinjiang class="b">你好啊</qinjiang>
</body>
</html>
3.ID 选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id属性全局唯一 , 不能同名*/
/*ID选择器
需要一个iD --> 在标签中定义ID
格式:
#id名字{
}
*/
#goods{
font-size: 200px;
}
#aaa{
color: yellow;
}
</style>
</head>
<body>
<p class="a" id="aaa">1</p>
<a href="" class="a">2</a>
<div class="a">3</div>
<span class="a" id="goods">4</span>
</body>
</html>
总结
-
标签选择器直接应用于HTML标签
-
类选择器可在页面中多次使用
-
ID选择器在同一个页面中只能使用一次
基本选择器的优先级 -
ID选择器>类选择器>标签选择器
-
基本选择器不遵循 “ 就近原则 "
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test1{
color: blue;
}
h1{
color: red;
}
#test2{
color: green;
}
</style>
</head>
<body>
<h1 class="test1" id="test2">hello,kitty!</h1>
</body>
</html>
CSS高级选择器3-1
1.层次选择器
2.后代选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,ul{
border: 1px solid red; /*边框*/
}
/*后代选择器
需求 : 获取body下面的所有p标签
使用空格隔开*/
body p{
background-color: green;
}
</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>
<p>3</p>
</body>
</html>
3.子选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,ul{
border: 1px solid red; /*边框*/
}
/*子选择器
需求 : 只获得body下面的第一层元素
*/
body>p{
background: slateblue;
}
</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>
<p>3</p>
</body>
</html>
4.相邻兄弟选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,ul{
border: 1px solid red; /*边框*/
}
/*相邻兄弟选择器 , 向下 ...
前提 : 定位到一个元素 E
需求 : 获取指定元素的相邻兄弟元素
*/
#a+p{
background: yellow;
}
</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>
<p>3</p>
</body>
</html>
5.通用兄弟选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,ul{
border: 1px solid red; /*边框*/
}
/*兄弟选择器
前提 : 定位到一个元素 E
需求 : 想获取指定元素的所有(指定元素下面的)兄弟元素
格式 :
E ~ F {
}
表示 : 获取指定E元素的同级元素的F标签*/
.aaa~p{
background: #ff524d;
}
</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>
<p>3</p>
</body>
</html>
CSS高级选择器3-2
1.结构伪类选择器
2.结构伪类选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,li{
border: 1px solid red;
}
/*
结构伪类选择器 :
概念 : 伪元素和伪选择器 是CSS已经定义好的 ,我们拿来就可以用
格式 :
选择器 :伪元素{
}
伪元素 :
:first-child -->父类的第一个子元素
:last-child
:
ul li:first-child{
background: yellow;
}
ul li:last-child{
background: red;
}
/*需求:选择body下面的第二个元素
E:nth-child(n) --> 需要找到E元素的父级元素 , 寻找父级元素的第n个子元素 ,
判断他是不是E元素 , 如果不是,就不会被选择.
*/
p:nth-child(2){
background: blue;
}
/*请你选择body下面的第二个p元素
E : nth-of-type(n) --->找到E的父级元素 , 然后在他的父级元素中去找第n个E元素
*/
p:nth-of-type(3){
background: brown;
}
</style>
</head>
<body>
<h1>adsdas</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
CSS高级选择器3-3
1.属性选择器
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*给基础代码添加样式*/
.demo a{
float: left; /*浮动*/
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
color: white;
text-align: center;
line-height: 50px;
text-decoration: none;
margin: 5px;
}
/*属性选择器
需要一个什么 : 属性
a[id]{
background: red;
}
a[id=name]{
background: red;
}
a[href^="https"]{
background: red;
}
a[href$="png"]{
background: red;
}
a[class]{
background: yellow;
}
a[href*="."]{
background: yellow;
}
*/
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links" id="name">1</a>
<a href="" class="links">2</a>
<a href="/1.png">3</a>
<a href="/1.jpg" class="links">4</a>
<a href="/1.png" id="apple">5</a>
<a href="https://blog.kuangstudy.com" class="links">6</a>
<a href="aaa">7</a>
<a href="abc.doc" class="links">8</a>
<a href="abcd.doc" id="">9</a>
</p>
</body>
</html>