Css
文章目录
什么是css
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
id和class
id选择器
id选择器可以为标有指定id的Html元素添加style样式,例如
<style>
#id{
background-color:red;
}
</style>
<p id='1'>
1111
</p>
在css中,一般用#来衔接对应的id
id在同一个html文件中不能重复,属于唯一标识
class选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:例子
.center{
XXX
}
css的创建
css创建可以分为在Html文件中创建和单独创建一个.css文件。
内部样式表
当在html文件中用css时,可以在head里用style来写,也可以在需要添加样式的元素属性那添加style
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
多重样式
如果某些属性在外部和内部都有对应的样式,那么属性值会从更加具体的样式表中继承过来,例如
在css文件中对p有以下属性:
p{
color:red;
text-align:left;
font-size:10px;
}
在html文件中,即内部样式表中有以下属性:
p{
text-align:right;
font-size:15px;
}
最后p的样式属性,颜色会继承外部样式表的属性,而文字排序方式和字体大小则会继承内部的
Css的一些属性
background-color
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
CSS中,颜色值通常以以下方式定义:
- 十六进制 - 如:"#ff0000"
- RGB - 如:“rgb(255,0,0)”
- 颜色名称 - 如:“red”
background-image
background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
当用image代替默认的背景图片后,仅仅是更换的背景图片,与当前的盒子内容无关,即还是可以写文字在此,也就成了文字出现在背景图上
当添加的图片比我们设置的范围要小的时候,我们可以设置平铺来让它多次显示或者填满
background-repeat:repeat-x;<!--在x(水平)方向上平铺-->
background-repeat:repeat-y;<!--在y(垂直)方向上平铺-->
background-repeat:no-repeat;<!--不平铺-->
当使用简写属性时,属性值的顺序为::
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Text
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
文字对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
文本缩进
文本缩进属性是用来指定文本的第一行的缩进
链接
对于Html的a标签,有一些专门的css属性用来设置它的样式
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。
特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
text-decoration删除链接中的下划线
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
列表
在 HTML中,有两种类型的列表:
- 无序列表 ul - 列表项标记用特殊图形(如小黑点、小方框等)
- 有序列表 ol - 列表项的标记有数字或字母
使用 CSS,可以列出进一步的样式,并可用图像作列表项标记。
ul li {list-style-type: circle;}将无序列表的变成空心圆点
ul li {list-style-type: square;}变成实心方块
ol li {list-style-type: upper-roman;}变成罗马数字的一二三四五...
ol li {list-style-type: lower-alpha;}变成英文字母的abcd
大部分情况下用的最多的是
list-style-typle:none;取消前面的点
盒子属性
以此网页为例子
可以把一个完整的网页看做是这些盒子拼凑而成
当我们用浏览器的控制台去点其中的一个区域后,在css的样式那能看到一个盒子图
可以看到,对于一个盒子而言,它具有外边距,边框,内边距,主体(内容)这几个部分组成
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
元素的宽度与高度
当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。
下面的例子中的元素的总宽度为300px:
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
最终元素的总宽度计算公式是这样的:
300+50+50+50=450px
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
border
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
margin
值 | 说明 |
---|---|
auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
length | 定义一个固定的margin(使用像素,pt,em等) |
% | 定义一个使用百分比的边距 |
在css中,可以指定不同的侧面不同的边距
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
padding
length | 定义一个固定的填充(像素, pt, em,等) |
---|---|
% | 使用百分比值定义一个填充 |
选择器
通配选择器
* {
margin: 0;
padding: 0;
}
元素选择器
h1 {
color: orange;
}
ID选择器
#id {
color: orange;
}
类选择器
.class {
color: orange;
}
兄弟选择器
/* a[href]{
color: bisque;
} */
/* a[href='#1']{
color: black;
} */
/* $正则表达式,表示以2结尾的 */
/* a[href$='2']{
color: blueviolet;
} */
/* ^表示以什么开始 */
/* a[href^='#']{
color: blueviolet;
} */
伪类选择器
/* 孩子选择器,先找box的孩子,然后从右往左找 */
/* .box h1:nth-child(2){
color: blueviolet;
} */
/* 这个是从左往右匹配,首先找p标签,然后把p标签全部找出来排序,将其中第二个改变 */
/* .box p:nth-of-type(2){
color: rgb(53, 143, 143);
} */
/* 找最后一个孩子 */
/* .box a:last-child{
color: rgb(179, 29, 49);
} */
/* 找P标签下的第一个孩子 */
/* .box p:first-of-type{
color: rgb(182, 146, 146);
} */