CSS
目录
介绍:
使用方式:
1、内联样式:
常见CSS属性:
字体颜色:color:
背景颜色:background-color:
字体大小:font-size:
文字水平对齐:text-align:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="background-color: red; color: seagreen; text-align: center">CSS基本概念</h1>
</body>
</html>
效果如下:
2.内嵌样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
background-color: red;
color: seagreen;
font-size: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS基本概念</h1>
<h1>内嵌样式</h1>
</body>
</html>
3.外链样式表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外链样式 -->
<link rel="stylesheet" href="demo1.css">
</head>
<body>
<h1>CSS基本概念</h1>
<h1>内嵌样式</h1>
</body>
</html>
一.样式选择器:
1.标签选择器:
2. id选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过id查找元素 */
#idsearch{
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<h1 id="idsearch">CSS基本概念</h1>
<h1>id选择器</h1>
</body>
</html>
效果如下:
3.Class选择器:
class可以和其他标签一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过class查找元素 */
.red{
background-color: silver;
color: brown;
}
p.red{
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="red">CSS基本概念</h1>
<h1 class="red">Class选择器</h1>
<p class="red">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, impedit eum necessitatibus, nihil placeat quaerat magnam cupiditate debitis cum obcaecati ipsum consequuntur architecto? Aliquam consequatur exercitationem alias nulla? Voluptas, aperiam.</p>
</body>
</html>
效果如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 通过class查找元素 */
.red{
background-color: silver;
color: brown;
}
.center{
text-align: center;
}
p.red{
font-size: 15px;
}
</style>
</head>
<body>
<h1 class="red center">CSS基本概念</h1>
<h1 class="red">Class选择器</h1>
<p class="red">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, impedit eum necessitatibus, nihil placeat quaerat magnam cupiditate debitis cum obcaecati ipsum consequuntur architecto? Aliquam consequatur exercitationem alias nulla? Voluptas, aperiam.</p>
</body>
</html>
注意:
标签与类选择器结合时,标签在前,类选择器在后 例如:p.red{}
4.群组选择器:
5.后代选择器:
<title>后代选择器</title>
<style>
div p{
/* 查找div后代元素P(包含直接子元素) */
color: cadetblue;
}
</style>
</head>
<body>
<div>祖先标签
<p>父标签
<span>子标签</span>
</p>
</div>
</body>
效果如下:
通过div找span: div span{}
ps 一些快捷键
<!-- div#title + tab -->
<div id="title"></div>
<!-- p.red + tab -->
<p class="red"></p>
<!-- div#d1.red + tab -->
<div id="d1" class="red"></div>
6.伪类选择器:
<title>伪类选择器</title>
<style>
h1{
color:darkcyan;
background-color: hotpink;
/* transition过渡 让样式的变化在规定时间内完成 */
transiton: all 0.5s;
}
/* s鼠标只有移动到文字上时 文字才变色 */
h1:hover{
/* 将鼠标移出时 显示的样式 */
color:green;
background-color: blue;
}
</style>
</head>
<body>
<h1>伪类选择器</h1>
</body>
二.选择器优先级:
当选择器的权重一致时 后写的样式生效
三.样式表特征 :
ps:大部分的文本属性都可以继承给子元素 继承的属性优先级是最低的
四.属性单位:
1.颜色
rgb red green bule
rgba (red(0~255), green, blue, 不透明度(0~1))
2.字体
3.文本样式
4.背景属性
opacity 0(纯透明)~1(不透明)
ps:需要设置宽高
一个小方块宽高25