css
基础语法
格式
选择器名{
属性：属性值
……
}
注意：1.css声明要以分号结尾，声明要用{}括起来
2.建议一行写一个声明
3.如果属性值由多个单词组成，要给值加上引号
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: antiquewhite;
color: red;
font-family: "arial black";
}
</style>
</head>
<body>
hello world!
</body>
</html>
css的使用
-
行内样式
将样式定义在html便签上的style属性中，以行内压样式写css耦合度较高
-
内部样式
定义在head标签中的sty标签中
-
外部样式
通过link标签引入外部的css文件
<link rel = "stylesheet" type="text/css" href="css/style.css"/>rel ：当前文件与引入的文件之间的关系
type：类型，css类型
href：引入的资源的路径
css的优先级：就近原则
选择器
id选择器
选择指定id属性值的元素 #
#id 属性值{
属性名：属性值
}
id值最好保持唯一
id定义规则：以字母，数字，下划线，中划线组成，不要以数字开头
class类选择器 .
选择设置指定class属性值的元素
.class属性值{
属性名：属性值
}
**通用选择器 ***
选择所有元素
*{
属性名：属性值
}
元素选择器/标签选择器
选择指定元素
标签名{
属性名：属性值
}
选择器的优先级
id选择器 > 类选择器 > 元素选择器 > 通用选择器
行内样式优先级是最高的，style属性中，权重是1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
* {
color: blue;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
}
#div2{
color: red;
}
.cls1{
font-weight: bold;
}
#div2,.cls1{
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div class="cls1">
div1
</div>
<div id="div2">
div2
</div>
<div id="">
div3
</div>
</body>
</html>
组合选择器
后代选择器（以空格分隔）
选择指定元素的所有的后代元素
子代选择器（以大于号分隔）
选择指定元素的第一代元素
相邻兄弟选择器（以加号分隔）
选择指定元素的相邻的下一个指定元素（只会找下一个）
普通兄弟选择器（以波浪号分隔）
选择指定元素后的指定同级元素（只会向下找）
背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
body{
/* 设置原色的背景颜色 */
background-color: aqua;
/* 设置元素的背景图片，默认背景重复显示 */
background-image: url(img/apple.jpg);
/* 设置背景图片是否重负 no-repeat:表示不重复 repeat-x横向重复，y纵向重复 */
/* background-repeat: repeat-x; */
/* 设置背景图像大小 */
background-size: 100px;
}
</style>
</head>
<body>
</body>
</html>
设置字体
font-family
1.当font-family的属性值包含空格或特殊字符时，需要将font-family的属性值用括号括起来
2.font-family有沟后备机制，可以为元素设置多种字体，当浏览器不识别第一种字体时，会尝试找下一种
3.当font-family的属性值由多个时，使用逗号隔开。
font-size
设置字体大小
font-style
设置字体风格
normal正常体
italic斜体
oblique斜体（强制倾斜）
font-weight
设置字体的粗细
bold粗体
100-900 值越大字体越粗
400正常字体
700粗体
display属性
块级元素
可以设置元素的宽高和边距，元素会自动换行
行内元素
不可以设置元素的宽高和边距，元素不会自动换行
display 属性
规定元素生成框的类型
block 元素会被显示，且元素会变成块级元素，元素前后会有换行符
none 元素会被隐藏
inline 元素会被显示为行内元素，元素前后没有换行符
inline-block行内块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style type="text/css">
#sp2 {
display: none;
}
#sp2 {
display: block;
width: 200px;
height: 200px;
background-color: aquamarine;
}
#div1 {
background-color: aqua;
}
#div2 {
background-color: antiquewhite;
}
#div3 {
background-color: red;
}
div {
display: inline;
}
p{
background-color: #00FFFF;
width: 200px;
height: 200px;
display: initial;
}
</style>
</head>
<body>
<span id="sp1">
这是一个span
</span>
<span id="sp2">
这是一个span2
</span>
<span id="sp3">
这是一个span3
</span>
<hr>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
<hr >
<p>文本1</p>
<p>文本2</p>
</body>
</html>
| 与自己和解，它的真实意思是：了解并接受自己的性格和能力的边界，承认自己不是全能的，不再为自己的错误而否定自己甚至为了害怕出错而不敢尝试，更多的去做自己适合和擅长的事，并从中找到进步的快乐 |
|---|
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
