时间戳

首页 > 技术文章 > CSS样式表02

CSS样式表02

xiaodan1040 2019-12-27 20:37 原文

CSS属性相关样式

width 和height，标签的宽度和高度

width：标签的宽，单位一般是px(像素)

height：标签的高，单位一般是px(像素)

ps：只有块级元素才能设置width和height，行内标签的宽是由文本大小决定的

P {
    width:200px;
    height:100px;
}

字体属性定义文本的字体样式、大小、加粗等

font-family 用于设置文字字体，可以设置多个字体名称，用逗号隔开。当浏览器不支持第一个字体，则会自动匹配下一个，直到匹配到可识别的为止

.c1 {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;}

font-size 设置文本的大小,单位为px(像素)

#d1 {font-size: 16px;}

font-weight 用来设置字体的粗细，属性值：normal(默认值，标准字符)、bold(粗体)、bolder(加粗)、lighter(更细的字符)、inherit(继承父标签的字体粗细)

.normal {font-weight: normal;}
#bold {font-weight: bold;}
p {font-weight: lighter;}

文本属性定义文本的颜色、对齐文本，装饰文本，对文本进行缩进等

color，用于设置文字的颜色可通过以下方式来设置

  • 颜色名称，比如：purple，blue，red，green，white等
  • 十六进制值，比如：#FF0000→红色；#00FF00→绿色；#0000FF→蓝色；#FFFFFF→白色；#000000→黑色
  • RGB值，比如：RGB(255,0,0)→红色
span {color: purple;}
#text-white {color: #FFFFFF;}
.text-green {color: rgb(0,255,0)}
/*
还有一种rgba(255,0,0,0.3),其中第四个参数是只alpha，指定颜色的透明度，范围在0.0到1.0之间
*/

text-align，用于修饰标签中文本行之间的对齐方式，属性值有left(左对齐)、right(右对齐)、center(居中对齐)和justify(两端对齐,使用概率小)

span {text-align: left;}
#d_div {text-align: right;}
.c1 {text-align: center;}

text-decoration，用于给文字添加特殊效果，属性值有none(默认，标准文本)，underline(文本带下划线)，overline(文本上方有一条线，类似页眉页脚)，line-through(给文本加上删除线)

/*用的比较多的，就是去掉a 标签默认的下划线*/
a {text-decoration: none;}

text-indent，用于实现文本缩进，比较常见的就是段落首行缩进。

p {
    font-size: 18px;
	text-indent: 32px;
}
/*需要注意的是，行内标签无法使用该属性*/

背景属性，可使用纯色或者图片来充当背景

background-color，用于设置标签的背景色，使用方式跟文本颜色color类似

input {background-color: aqua;}
#id_p {background-color: #3a4859;}
p .c1 {background-color: rgb(210,105,30);}

background-image，用于设置标签的背景图片，属性值可以填写本地或网站图片路径

div {background-image: url('dawn.jpg');}

background-repeat，用于设置背景图片是否平铺，属性值有repeat(默认)，背景图片平铺整个标签；repeat-x，水平方向平铺；repeat-y，垂直方向平铺；no-repeat，不平铺

div {background-repeat: no-repeat;}

background-position，设置背景图片的位置，可以用left，top，right，bottom方向设置；也可以使用px设置

/*第一个属性值是水平方向，第二个属性值是垂直方向*/
div {background-position: left top;}

以上属性可以汇总简写为background

/*以下属性值位置可以随意排，浏览器会自动识别*/
div {background: chocolate url('dawn.jpg') no-repeat left top;}

display ，用于控制HTML标签的显示效果

值 意义
display: "none" HTML文档中标签存在，但浏览器不显示，通常配合Js使用
display: "block" 默认独占一行。如设置了宽度，则会通过margin填充剩下的部分
display: "inline" 按行内元素显示，width、height、margin、float属性都失效
display: "inline-block" 是元素同时具有行内元素和块级元素的特点

CSS盒子模型

盒子模型中包含了border(边框)、margin(外边距)、padding(内边距/内填充)以及标签(也成为元素)

margin，外边距，设置标签与标签之间的距离

border，边框，标签的边框

padding，内边距，标签内部文本与边框之间的距离

border-边框属性

border-width，边框宽度

border-style，边框样式

border-color，边框颜色

/*统一设置四个边框的属性*/
#di {
    border-width: 2px;
    border-style: solid;
    border-color: purple;
}

以上属性可以缩写为 border：属性值1 属性值2的形式，不用考虑位置，浏览器自动识别

/*统一设置四个边框的属性*/
#di {border: 2px solid purple;}

除了可以统一设置所有边框的属性外，我们还可以单独设置某个边框的样式

#i1 {
    border-top-style: dotted;
    border-top-color: red;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: none;
}

边框样式

值 意义
border-style: "none" 无边框
border-style: "dotted" 点状虚线边框
border-style: "dashed" 虚线边框
border-style: "solid" 实线边框

border-radius，用于设置圆角边框

/*得到一个圆形的div*/
div {
    width: 200px;
    height: 200px;
    border:1px solid red;
    border-radius: 200px;
}

margin-外边距属性

.d1 {
    width: 200px;
    height: 200px;
    /*顶部(上方)外边距*/
    margin-top: 10px;
    /*左侧外边距*/
    margin-left: 20px;
    /*底部(下方)外边距*/
    margin-bottom: 30px;
    /*右侧外边距*/
    margin-right: 40px;
}
.d2 {
    /*简写方式*/
	margin: 10px 20px 30px 40px;
}

#d2 {
    /*1个属性值，表示所有的外边距*/
    margin: 10px;
    /*2个属性值：第一个值是上下外边距，第二个值是左右外边距*/
    /*margin: 20px 40px;*/
    /*3个属性值：第一个值是顶部(上方)外边距，第二值是左右外边距，第三个值是底部(下方)外边距*/
    /*margin: 20px 30px 40px;*/
    /*4个属性值 上 右 下 左 顺时针*/
    /*margin: 20px 30px 40px 50px;*/
}

ps：需要注意的是，

  • 一般浏览器都会自动给body标签增加8px的外边距，如有需要，需要我们自己取消

  • 网页内的标签都水平居中，则通过设置margin处理

    margin: 0 auto;  /*水平居中*/

padding内填充

.d1 {
    width: 200px;
    height: 200px;
    /*顶部(上方)内填充*/
    padding-top: 10px;
    /*左侧内填充*/
    padding-left: 20px;
    /*底部(下方)内填充*/
    padding-bottom: 30px;
    /*右侧内填充*/
    padding-right: 40px;
}
.d2 {
    /*简写方式*/
	padding: 10px 20px 30px 40px;
}

#d2 {
    /*1个属性值，表示所有的内填充*/
    padding: 10px;
    /*2个属性值：第一个值是上下内填充，第二个值是左右内填充*/
    /*padding: 20px 40px;*/
    /*3个属性值：第一个值是顶部(上方)内填充，第二值是左右内填充，第三个值是底部(下方)内填充*/
    /*padding: 20px 30px 40px;*/
    /*4个属性值 上 右 下 左 顺时针*/
    /*padding: 20px 30px 40px 50px;*/
}

推荐阅读