CSS
css的唯一目的就是让网页具有美观一致的页面
2.1 css书写要求
2.11内联样式（行内样式）
要使用内联样式，你需要在相关的标签内使用样式 (style) 属性。Style 属性可以包含任何 CSS 属性
<title>Title</title>
<style>
</style>
</head>
2.12 内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<head>
<meta charset="UTF-8">
<style>
</style>
<body>
2.13外部样式（推荐）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部
<link rel="stylesheet" href="./cos1.css">
2.2选择器
CSS语法规则由两个主要的部分构成: 选择器，以及一条或多条声明 (样式)
2.2.1全局选择器/通配符选择器
可以与任何元素匹配，优先级最低，一般做样式初始化
<style>
*{
color:red;
}
</style>
2.2.2元素选择器
HTML文档中的元素，p、b、div、a、img、body 等
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的"个性”
div{
color: pink;
background-color:palevioletred ;
}
所有的标签，都可以是选择器。比如ul、li、label、 dt、 dl、input、div等无论这个标签藏的多深，一定能够被选择上
选择的所有，而不是一个
2.2.3类选择器
规定用圆点，来定义，针对你想要的所有标签使用
<style>
.box1{
color: palevioletred;
}
.duan1{
color: pink;
}
.houx{
font-size: 50px;
}
</style>
<div class="box1">
<p class="duan1">米彩</p>
<p class="duan2 houx" >昭阳</p>
</div>
2.2.4 ID选择器
针对某一个特定的标签来使用只能使用一次。css 中的ID选择器以#来定义
<style>
#text{
color: palevioletred;
}
</style>
<p id="text">woshihahahah</p>
2.2.5合并选择器
语法：选择器1，选择器2…{}
作用：提取同样的样式，减少重复代码
类选择器 .text,.text1{
}
id选择器 #text1,#text{
}
元素选择器 p,span{
}
2.26选择器的优先级
CSS中权重用数字衡量
元素选择器的权重为:1
class选择器的权重为: 10
id选择器的权重为:100
内联样式的权重为:1000
优先级从高到低: 行内样式>ID选择器>选择器>元素选择器
2.3字体样式
css字体属性定义字体，颜色，大小，加粗，文字样式
2.3.1 color
color: blue;
color: #0000ff;
color: rgba(0,0,256);
color: rgba(0,0,256,0.3); rgba最后一个数据为透明度
2.3.2 font-size
设置文本的大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
font-size: smaller;
font-size: 50px;
2.3.3 font-weight
设置文本的粗细
| 值 | 描述 |
|---|---|
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100-900 | 定义由细到粗 400等同默认，而700等同于bold |
font-weight: bolder;
font-size: 900;
2.3.4 font-style
指定文本的字体样式
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
font-style: normal;
font-style: italic ;
font-style: inherit;
2.3.5 font-family
font-family属性指定一个元素的字体
font-family: 新宋体;
font-family: "Arial Rounded MT Bold";
2.4 背景属性
2.4.1 background-color
该属性设置背景颜色
div{
width: 400px;
height: 400px;
background-color: pink;
}
2.4.2 backgroud-image
设置元素的背景图像
元素的背景是元素的总大小，包括填充和边界 (不包括外边距)。默认情况下background-image属性放置在素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分
width: 499px;
height: 366px;
background-image: url("img2.png");
2.4.3 background-repeat
该属性设置如何平铺背景图像
| 值 | 描述 |
|---|---|
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |
background-repeat:repeat ;
background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat:no-repeat;
2.4.4 background-size
该属性设置背景图像的大小
| 值 | 描述 |
|---|---|
| length | 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小 |
2.4.5 background-position
| 值 | 描述 |
|---|---|
| left top | 左上 |
| left center | 左 中 |
| left bottom | 左下 |
| right top | 右上角 |
| right center | 右 中 |
| right bottom | 右 下 |
| center top | 中 上 |
| center center | 中 中 |
| center bottom | 第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100%。如果只指定了一个值，其他值默认是50%。默认是0% 0% |
| x% y% | 单位是像素 |
background-repeat: no-repeat;
background-position:left bottom;
当不加background-size 只会显示该图片上的位置
以上方代码为例，只会显示该图片的左下角
background-size:contain ;
感谢您抽出宝贵的时间阅读我的文章报告。我诚挚地欢迎您提出任何批评和指正，因为这将帮助我不断改进和成长。我深知自己的不足之处，也明白每一次批评都是一次宝贵的学习机会。我承诺会认真对待您的意见，并努力在未来的工作中加以改进。期待与您未来的交流，我相信通过您宝贵的指导，我的文章和报告能够得到进一步的提升。再次感谢您的宝贵意见和建议！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
