CSS
2023-02-15
css引入方式
1.直接写在html文件中
<head>
<title>Document</title>
<style>
书写css样式代码
</style>
</head>
<body>
</body>
</html>
2.将css样式代码直接写在标签中。
<div style="color:red;font-size:16px;"></div>
3.css文件引入
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
选择器
1.标签选择器
直接使用标签名作为选择器名，会更改网页中所用同名标签的样式。
2.类选择器
标签中增加class属性，class="class类名"
css样式中 .class类名 { }
3.id选择器
标签中增加id属性名， id="id名"
css样式中 #id名 { }
4.通配符选择器
*{ } 更改页面中所有标签的样式。
复合选择器
后代选择器
可以选复习选择器后代中所有重名的子选择器，空格隔开
选择器1 选择器2
子代选择器
只能选择父选择器的儿子选择器，>隔开
选择器1>选择器2
并集选择器
可以将多组标签设置统一样式，逗号隔开
选择器1，选择器2
交集选择器
更改同时满足两个选择器的标签样式，连写
选择器1选择器2
hover伪类选择器
鼠标悬停出发css样式及改变
选择器：hover { }
文字样式
font-size 文字大小 数字+px 默认16px
font-weight 文字粗细 数字 （normal正常，bold加粗）（400，700）
font-style 文字样式 normal 正常 italic 倾斜
font-family 文字类型
font复合属性
顺序不可颠倒，前两个可省略。
font:style weight size/line-height family
<style>
* {
margin: 0;
padding: 0;
}
p {
font: italic 700 40px "Gill Sans";
text-decoration: underline;
text-align: center;
}
a {
color: aqua;
text-decoration: none;
}
.class {
color: red;
font-size: 40px;
font-weight: 700;
font-style: italic;
font-family: "Gill Sans";
text-decoration: line-through;
text-align: right;
}
/* font 复合写法，先后顺序为style weight size/line-height family 前两个可以省略。中间用空格隔开，顺序不能颠倒 */
#id {
color: blue;
font: 40px/2 "Gill Sans";
text-decoration: overline;
text-align: left;
}
</style>
</head>
<body>
<div>
<a href="#">标签选择器</a>
<p class="class">类选择器</p>
<p id="id">id选择器</p>
<p>通配符选择器</p>
</div>
</body>
背景样式
background-color 背景颜色，（英文单词，16进制颜色代码，rgba（））
background-image：url（） 背景图片 ，背景图片地址
background-repeat 背景图片是否平铺 repeat no-repeat repeat-x repeat-y
background-position：x y； 背景图片位置。可以使用两个像素值，也可以使用位置词，left，center，right。top，center，bottom
background复合属性
顺序可以颠倒，属性可以shenglue
background（color url（） repeat center top）
<style>
div {
width: 800px;
height: 800px;
background-color: red;
background-image: url("zhao.png");
background-repeat: no-repeat;
/* background-repeat: repeat-x; */
/* background-position: 50px 80px; */
background-position: center center;
}
/* background 复合写法 不规定先后顺序，可以任意省略，中间用空格隔开。 */
.box {
width: 1000px;
height: 800px;
background: blue url("zhao.png") no-repeat right bottom;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
</body>
元素显示模式
块级元素
独占一行，可以设置宽高，高度由内容撑开宽度为父级元素宽度。
行内元素
一行显示多个，不能设置宽高
行内块元素
一行显示多个，可以设置宽高
元素显示模式转化
diaplay：block
display：inline-block
display：inline
CSS特性
继承性
文字控制属性都可以继承，子元素自己定义的特性会覆盖继承来的特性
层叠性
后定义的元素属性会覆盖前面的属性
优先级
继承< 通配符选择器 <标签选择器 <类选择器 <id选择器 <行内样式 <！important
复合选择器判断优先级（行内样式，id选择器，类选择器，继承）
！important提升优先级，但不会提升继承的优先级。
