CSS入门
CSS基本使用
CSS 全称 Cascading Style Sheets 层叠样式表
如果说HTML是网页的结构 那么CSS就是网页化妆师
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="1.css" type="text/css">
<style>
#div2{
color: aqua;
font-size: inherit;
}
#div4{
color: black;
font-size: medium;
}
</style>
</head>
<body>
<div style="color: red;font-size: 50px">这是第一种引入方式</div>
<div id="div2">这是第二种引入方式</div>
<div id="div3">这是第三种引入方式</div>
<!--外部文件引入 < <style>标签引入 < 标签内引入-->
<div id="div4" style="color: burlywood">引入方式的优先级</div>
</body>
</html>1.css
#div3{
color: teal;
font-size: large;
}
#div4{
color: coral;
css样式的优先级
外部文件引入 < <style>标签引入 < 标签内引入CSS选择器
基本选择器
优先级:
id选择器 > class选择器 > 标签选择器
Id选择器：100 > class 选择器：10 > 元素选择器：1标签选择器
div{
color:red;
}class选择器
通过标签的 class 属性 ，选择对应的元素 借助了一个类的概念，一处定义，可以多处使用
.box{
color: red;
}id选择器
通过标签的 id 属性，选择 对应的元素
注： id 选择器唯一
#box1{
color: aqua;
}群组 选择器
群组选择器是可以同时选择多个标签的选择器
p,div{
color: red;
}层次选择器
层次选择器分为，子代、后代、相邻和兄弟等四种选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子代选择器 选中的只是儿子 4*/
#box1>p{
color: red;
}
/*后代选择器 选中的是儿子、孙子、孙子的孙子 5 6*/
#box1 div{
color: aqua;
}
/*相邻选择器 紧挨着同级标签 2 5 (6)*/
p+div{
font-size: 50px;
}
/*兄弟选择器 同级的所有标签 2 3(4 5 6) */
p~div{
font-weight: bold;
}
</style>
</head>
<body>
<p>这是一个段落</p> <!--1-->
<div>这是另一个段落</div> <!--2-->
<div id="box1"> <!--3-->
<p>这是一个段落</p> <!--4-->
<div>这是另一个段落 <!--5-->
<div>这是第三段</div> <!--6-->
</div>
</div>
</body>
</html>伪类选择器
link未访问过的样式
visited 访问过后的样式
hover 划过的样式
active 激活的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*未访问过*/
a:link{
font-size: 30px;
}
/*划过*/
a:hover{
color: pink;
}
/*激活 点击并按住不动*/
a:active{
font-size: 50px;
}
/*访问后*/
a:visited{
color: yellow;
}
p:hover{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com/" target="_blank">百度</a>
<p>文字</p>
</body>
</html>CSS字体/文本
字体常用样式
font-family 字体
华文行楷
Microsoft-Yahei
默认微软雅黑Microsoft-Yahei,字体中有多个字体时，如果前面的字体没有，就用后面的字体
font-family: '华文行楷','华文中宋';font-size 字体大小
| 值 | 描述 |
|---|---|
| smaller | 把 font-size 设置为比父元素更小的尺寸。 |
| larger | 把 font-size 设置为比父元素更大的尺寸。 |
| length | 把 font-size 设置为一个固定的值。 |
| % | 把 font-size 设置为基于父元素的一个百分比值。 |
| inherit | 规定应该从父元素继承字体尺寸。 |
font-style 字体样式
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
font-weight 字体粗细
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100 200 300 400 500 600 700 800 900 | 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
font-variant 字体小大写
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
font 复合样式
可以按顺序设置如下属性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
p{
font-family: '华文行楷','华文中宋';
font-size: large;
font-style: oblique;
font-weight: bold;
color: red;
}
div{
font: italic bold 12px/20px arial;
}CSS背景
背景常用样式
background-color 背景颜色
background-image 背景图片
background-repeat 背景铺盖
background-size 背景大小
background-position 背景定位
background 复合样式 color image repeat position/size
.box {
height: 300px;
width: 300px;
background-color: aqua;
background-image: url('../img/1.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: 10px 10px;
}
.box1{
height: 300px;
width: 300px;
/*background:color image repeat position/size*/
background: aqua url("../img/1.jpg") no-repeat top;
}