css

最新推荐文章于 2025-03-18 00:30:00 发布

wwwwxiaobai

最新推荐文章于 2025-03-18 00:30:00 发布

阅读量106

点赞数

本文链接：https://blog.youkuaiyun.com/wwwwxiaobai/article/details/88922863

版权

css

1.全称为"层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

2.1css的样式
css的样式优势是网页的设置更加的简便。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>大丈夫当如此！<span>是英雄</span>，分我杯羹！<span>年少轻狂</span>，只记得眉心一点。举手与天竞自由，<span>豪情纵</span>，胸怀敞。</p>
</body>
</html>

通过设置样式来设置，而且只需要编写一条css样式语句

2.2css的三大特性
继承性、层叠性、优先级

继承性：子元素可以继承父元素的样式。
a标签的颜色不能继承，如果一定要修改a标签的颜色直接作用在a标签上面。
h标签的大小不能继承，如果一定要修改h标签的大小直接作用在h标签上面。

层叠性：是浏览器处理冲突的一个特性。
如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠掉。
如果多个不同的属性通过两个选择器设置到一个元素上面，那么不会发生层叠。

优先级：即是指CSS样式在浏览器中被解析的先后顺序。

3.CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
在这里插入图片描述

选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:12px;color:red;}
注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{
   font-size:12px;
   color:red;
}

4属性
4.1文本

text-indent:2em	设置首行缩进
text-align	设置文本的位置
center	设置内容在容器的水平方向上居中
left	设置内容在窗口的水平方向上靠左
right	设置内容在容器的水平方向上靠右
text-decoration	设置文本的装饰
none	没有任何装饰
underline	下划线
margin	0
auto	设置容器自身水平居中

加粗、倾斜、下划线

1 font-weight:bold;

2 font-style:italic;

3 text-decoration:underline;
4.2背景

background-color	设置背景颜色
background-image	设置背景图片
background-image:url(图片的路径）	默认情况下图片如果比容器要小，它会平铺满盒子。并且padding区域有背景图
background-repeat	设置背景是否平铺
no-repeat	不平铺
repeat-x：在水平方向上平铺	repeat-y:在垂直方向上平铺
repeat	平铺
background-position	设置背景图片的位置
background-attachment:fixed	设置背景否固定
fixed	背景会被固定住，即不会被滚动条滚走