CSS基础
样式类型和样式选择器
样式表类型
嵌入样式表
设置样式名，嵌入到需要的标签里
<html>
<head>
<title></title>
<style>
.demol{
color:red;
width:500px;
height:100px;
}
</style>
</head>
<body>
<div class="demol">
demol
</div>
</body>
</html>
外部样式
-
<link rel="stylesheet" href="css/style.css"/>
利用link引入，href写css文件的相对路径 -
在head标签中写style样式标签，然后加入以下代码
<head>
<title></title>
<style>
@import url(css.css)
</style>
</head>
- 在css文件中引入另一个css样式文件：
@import url(css.css);
内联样式
<div style="color: blue;width: 100px;height: 100px; background: black;">
demo2
</div>
样式选择器
class选择器
选择对应的class属性值元素中的内容
.类名{属性：值}
标签里class=“类名”
<head>
<title></title>
<style>
.demol{
color:red;
}
</style>
</head>
<body>
<div class="demol">
demol
</div>
id选择器
和class选择器类似，但id选择器不能重复，class选择器可以重复多次
使用方式为 #id名{属性：属性值}
标签中id=“id名”
<style>
#id1{
color: red;
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div id="id1">
demol
</div>
元素选择器
选择对应标签、元素里的内容，影响所有此标签
标签名{属性：属性值}
<head>
<title></title>
<style>
div{
color:red;
background-color: yellow;
}
</style>
</head>
<body>
<div>
demol
</div>
<div>
demo2
</div>
</body>
通配符选择器
选择当前页面所有元素，使用方式为 *{属性}
这种选择器不太常用
子选择器
元数 元素{属性：值}
只锁定标签中某一标签
如下演示代码锁定div中的p标签
.demo1 p{
color:rgb(199, 11, 142);
background-color: rgba(255, 0, 115, 0.164);}
</style>
</head>
<body>
<div class="demo1">
<h1>题都城南庄</h1>
<p>去年今日此门中，人面桃花相映红</p>
</div>
运行结果，h1标签不变，p标签
也可这样表示.demo1>p
并集选择器
<style>
/*选择h1,div,p这些标签*/
h1,div,p{
color:rgb(45, 111, 105)
}
</style>
<body>
<h1>Hello world</h1>
<div>HEllo html</div>
<p>hello css</p>
<h2>Hello js</h2>
</body>
交集选择器
找到标签和使用选择器交集的对象
<head>
<title></title>
<style>
.div1{
/* color:red; */
background-color: yellow;
}
.demo1{
color:rgb(199, 11, 142);/*梅红*/
background-color: rgba(255, 0, 115, 0.164);/*粉红*/
}
body{
background-color:rgb(212, 218, 222)/*蓝灰*/
}
/*div标签，且添加了demo1类*/
div.demo1{
color:rgb(90, 188, 240)/*蓝*/
}
</style>
</head>
<body>
<div class="demo1">
<h1>题都城南庄</h1>
<p>去年今日此门中，人面桃花相映红</p>
<p>人面不知何处去，桃花依旧笑春风</p>
</div>
<div>
旧人面
</div>
<p class="demo1">新桃花</p>
</body>
hover伪类选择器
设置鼠标悬停在目标上时，目标的样式
如下改变a标签鼠标悬停时的样式
a:hover{
color: rgb(206, 83, 132);
background-color: blue;
}
<a>追忆“去年今日”</a>
悬停时
样式优先级
优先级高的选择器会覆盖优先级低的选择器
优先级公式如下：
背景设置
背景颜色和图片设置
若背景图和背景颜色重叠，背景图在上面
<style>
/*目标标签为h1*/
h1{
width: 400px;
height: 400px;/*设置宽高*/
background-color:azure /*设置背景颜色*/;
background-image: url(1.jpg);/*url里放图片的相对路径，设置背景图片*/
}
</style>
背景平铺
background-repeat属性值决定平铺效果
background-repeat：repeat; 默认值
background-repeat：no-repeat; 不平铺
background-repeat：repeat-x；沿x方向平铺
background-repeat：repeat-y；沿y方向平铺
背景位置
背景位置默认放在左上角
属性名：background-position
background-position:-50px,100px;
/*第一个控制x方向移动，第二个值控制y方向
正为右下，负数为左上，`或者使用上述方位值*/
背景属性连写
推荐顺序 background：color image repeat position
各值之间用逗号隔开
<style>
/*目标标签为h1*/
h1{
width: 400px;
height: 400px;/*设置宽高*/
background:red url(1.jpg) no-repeat -50px 100px;
}
</style>
显示模式
块级元素
独占一行（一行只显示一个）
可以设置宽高
宽度默认为父集的100%
行内元素
一行可以显示多个
不可以设置宽高
尺寸和内容的大小一样
行内块元素
一行可以显示多个
可以设置宽高
显示模式转换
转换成块级元素 display：block
转化成行内块元素 display：inline-block
转化成行内元素 display：inline
如下示例
<style>
div{
display: inline-block;/*将div转化为行内块*/
}
.type1{
width: 300px;
height: 30px;
background-color: rgb(248, 209, 216);
}
.type2{
width: 300px;
height: 30px;
background-color: rgb(200, 220, 245);
}
</style>
</head>
<body>
<div class="type1">刀起樱花落</div>
<div class="type2">燕返故人归</div>
盒子模型
概念
网页渲染时，会将每个元素看成一个矩形区域，页面中每一个标签都可看成盒子，用于网页的布局
盒子模型的组成
<head>
<title>Document</title>
<style>
div{
/*内容区域*/
width: 200px;
height: 200px;
background-color:rgb(166, 231, 231);
/*设置边框线*/
border: 2px solid;
/*设置内边距*/
padding: 30px;
/*设置外边距,盒子的外部占用空间*/
margin: 40px;
display:inline-block;/*转换为行内块*/
}
</style>
</head>
<body>
<div>HelloWorld</div>
<div>你好世界</div>
</body>
内容
width、height 设置宽高，background-color 设置背景颜色
为盒子的主体内容
边框
属性名：border（复合属性）
属性连写，以空格隔开，不分先后顺序
border：10px solid red；（第二个为线条种类）
实线：solid 、虚线：dashed 、点线：dotted
border-方位词 （用于设置某一边的边框）
示例：
border-top: 3px solid #5e74e2;
border-bottom: 1px solid #edeef0;
内边距
/*设置所有方向内边距*/
padding: 30px;
/* 设置每个方向的内边距，第一个为上方，顺时针方向 */
/* 三值为 上 左右 下 ，两值为 上下 左右 */
padding: 10px 20px 40px 80px;
不管padding赋予几个值，规则都是从上开始，顺时针取值，若值没有就看对面是什么值就取什么值
外边距
设置方式和内边距相同，参考内边距的设置方式就行了
盒子模型的设计
- 手动内减
border（边框）和padding（内边距）的取值都会撑大盒子，若需要写一个固定大小的盒子可以计算内容、边框、边距的取值，但这种方式比较麻烦
- 自动内减
给盒子添加属性box-sizing:border-box; 即可
自动计算多余大小，自动减去
- 清除默认样式
两种方式解决，第一种去除选中标签的默认样式，第二种去除所有标签的默认样式 - 版心居中
让有效内容在网页中显示居中，即左右外边距相同
margin:0 auto;// 设置成auto值即可，会自动计算左右边距
- 外边距折叠现象
垂直布局的块级元素，上下的margin会合并
若两个都设置了外边距，会自动取最大值，所以只需要给一个块级元素设置margin即可
CSS浮动
结构伪类
作用：根据html中的结构关系查找元素，常用于查找某父级选择器中的子元素
减少对html类的依赖，提高简洁性
| 选择器 | 说明 |
|---|---|
| 元素名：first-child | 选中第一个元素 |
| 元素名：last-child | 选中最后一个元素 |
| 元素名：nth-child(n) | 选中第n个元素 |
| 元素名：nth-last-child(n) | 选中倒数第n个元素 |
n的位置也可传公式
| 功能 | 公式 |
|---|---|
| 偶数 | 2n、even |
| 奇数 | 2n-1、2n+1、odd |
| 找到前5个 | -n+5 |
| 找到后5个之后的元素 | n+5 |
| 其他可灵活使用 | ~ |
<style>
/*选中第一个li*/
li:first-child{
width: 400px;
height: 30px;/*设置宽高*/
background:rgb(181, 237, 239);/*天蓝色*/
}
/*选中最后一个li*/
li:last-child{
background-color: #a8bfea;/*淡蓝色*/
}
/*任意一个，设置为第n个*/
li:nth-child(4){
background-color: #afe7cb;/*淡绿色*/
}
/*设置倒数第n个*/
li:nth-last-child(2){
background-color: #b99fbf;/*淡紫色*/
}
</style>
<body>
<ul>
<li>光阴者</li>
<li>百代之过客也</li>
<li>而浮生若梦</li>
<li>为欢几何</li>
<li>古人秉烛夜游</li>
<li>良有以也</li>
</ul>
</body>
伪元素
一般页面的非主体内容可以使用伪元素
区别：
元素：html设置的标签
伪元素：css模拟出的标签效果
| 伪元素 | 作用 |
|---|---|
.父元素名::before | 在父元素的内容的最前面添加一个伪元素 |
.父元素名::after | 在父元素的内容的最后添加一个伪元素 |
content:内容; | 写上伪元素的内容 |
注意：
必须设置content属性才能生效
伪元素默认是行内元素
<style>
.test{
width: 300px;
height: 300px;
color:pink;
}
.test::before{
content: '羌笛';
}
.test::after{
content:'怨杨柳';
}
</style>
<body>
<div class="test">何须</div>
</body>
运行结果：
72
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
