CSS
-
Cascading Style Sheet 层叠级联样式表
-
美化网页：字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动等
-
发展史：
- CSS1.0
-
CSS2.0：DIV（块）+CSS， HTML和CSS结构分离的思想，网页变得简单，SEO
- CSS2.1：浮动、定位
-
CSS3.0：圆角、阴影、动画等，浏览器兼容性
-
优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于HTML的CSS文件
- 利用SEO，容易被搜索引擎收录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范：
<style>可以编写CSS代码
语法：
选择器{
声明1；
声明2；
（每一个声明最好使用分号结尾）
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
css的四种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
h1{
color:green;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--优先级：就近原则，哪行代码离该元素最近使用哪行-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:yellow">我是标签</h1>
</body>
</html>
外部样式的两种写法：
- 链接式：HTML格式（推荐使用）
<link rel="stylesheet" href="style.css">
- 导入式：CSS2.1特有
<style>
@import url("style.css");
</style>
选择器
- 作用：选择页面上的某一个或者某一类元素
三种基本选择器
- 标签选择器：选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器，会选择到页面上所有的这个标签的元素 */
h1{
color: #a13d30;
background: #3cbda6;
border-radius: 24px;
}
p{
font-size: 40px;
}
</style>
</head>
<body>
<h1>学java</h1>
<p>java</p>
</body>
</html>
- 类选择器class：选择所有class属性一致的标签，可以跨标签使用 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器的格式： .class的名称{}
可以多个标签归类，是同一个class,可以复用
*/
.a{
color: #3748ff
}
.b{
color: #a24fff
}
</style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1 class="a">标题3</h1>
<p class="b">P标签</p>
</body>
</html>
- ID选择器：全局唯一 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器： #id名称{}
id 必须保证全局唯一！
优先级：固定，不遵循就近原则
id选择器>calss选择器>标签选择器
*/
#a{
color: #ff008a;
}
.c{
color: #2d1dc1;
}
h1{
color: #02ff00;
}
</style>
</head>
<body>
<h1 id="a">标题1</h1>
<h1 id="b">标题2</h1>
<h1 class="c">标题3</h1>
<h1 class="c">标题4</h1>
<h1>标题5</h1>
</body>
</html>
层次选择器
- 后代选择器：在某个元素的后面
body p{
background: red;
}
- 子选择器：后面一代
body>p{
background: red;
}
- 相邻（兄弟）选择器：同辈 只有一个，相邻（向下）
.class名 + p{
background: red;
}
- 通用选择器:当前选择元素向下的所有兄弟元素
.class名~p{
background: red;
}
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ul的第一个子元素 */
ul li:first-child{
background: pink;
}
/* ul的最后一个子元素 */
ul li:last-child{
background: gray;
}
/* 选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效
*/
P:nth-child(2){
background: blue;
}
/* 选中父元素下的p元素的第二个，类型 */
p:nth-of-type(2){
background:yellow;
}
</style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
属性选择器（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.b a{
float: left;
dispaly: block;
height: 50px;
width: 50px;
background: pink;
border-radius: 10px;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
font:bold 20px/50px Arial;
}
/* 属性名，属性名=属性值（正则） */
/* 存在id属性的元素 a[]{} */
/* id = first 的元素 */
a[id = first]{
background:yellow;
}
/*
= 绝对等于
*= 包含
^= 以这个开头
$=以这个结尾
*/
/* class中含有links的元素 */
a[class *= "links"]{
background: blue;
}
/* 选中href中以http开头的元素 */
a[href^=http]{
background: yellow;
}
/* 选中以pdf结尾的元素 */
a[href$=pdf]{
background: yellow;
}
</style>
</head>
<body>
<p class="b">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="https://www.vip.com" class="links item active" target="_blank" id="test">2</a>
<a href="" class="links item" >3</a>
<a href="" class="links item" >4</a>
<a href="/a.pdf">5</a>
<a href="/abc.pdf">6</a>
<a href="abc.doc">7</a>
<a href="abcd.doc">8</a>
<a href="" class="links item last" >9</a>
<a href="">10</a>
</p>
</body>
</html>
