Bootstrap

CSS属性

像素

屏幕是是由若干个小点组成的,这些小点就是像素(px),像素点越小,呈现的内容就越清晰、越细腻。

颜色的表示

颜色名

编写方式:直接使用颜色对应的英文单词,编写比较简单,颜色名这种方式表达的颜色比较单一,所以用的并不多,如:

  • 红色:red
  • 绿色:green
  • 蓝色:blue
  • 紫色:purple

rgb/rgba

编写方式:使用这三种光的三原色进行组合

  • r:红色
  • g:绿色
  • b:蓝色
  • a:透明度(透明度的值是0~1,1是不透明)
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */

/* 也可以使用百分比表示一种颜色(用的少) */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

HEX/HEXA

HEX的原理同与rgb一样,依然是通过:红、绿、蓝色 进行组合,只不过要用6位(分成3组) 来表示,格式为:#rrggbb

每一位数字的取值范围是: 0 ~ f ,即:( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f )

每一种光的最小值是: 00 ,最大值是:ff

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */


/* 如果每种颜色的两位都是相同的,就可以简写*/
color: #ff9988;/* 可简为:#f98 */


/* 但要注意前三位简写了,那么透明度就也要简写 */
color: #ff998866;/* 可简为:#f986 */

HSL/HSLA

HSL是通过:色相、饱和度、亮度,来表示一个颜色的,格式为: hsl(色相,饱和度,亮度)

色相:取值范围是 0~360 度,具体度数对应的颜色如下图:

饱和度:取值范围是 0%~100% 。(向色相中对应颜色中添加灰色, 0% 全灰, 100% 没有灰)

亮度:取值范围是 0%~100% 。( 0% 亮度没了,所以就是黑色。 100% 亮度太强,所以就是白色了)

HSLA 其实就是在 HSL 的基础上,添加了透明度。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

字体属性

字体大小

属性名:font-size

作用:控制字体的大小

语法:

div {
    font-size: 40px;
}

注意:

  • Chrome浏览器支持的最小文字为12px,默认的文字大小为16px,并且0px会自动消失
  • 不同浏览器默认的字体大小可能不一致,所以最好给一个明确的值,不要用默认大小
  • 通常以给body设置font-size属性,这样body中的其他元素就都可以继承了
  • 由于字体设计原因,文字最终呈现的大小,并不一定与font-size的值一致,每个字体设计都会设计x的位置,这决定了基线
  • 通常情况下,文字相对字体设计框,并不是垂直居中的,而是靠下一些

字体族

属性名:font-family

作用:控制字体类型

语法:

div {
    font-family: "STCaiyun", "Microsoft YaHei", sans-serif
}

注意:

  • 使用字体的英文名字兼容性会更好,具体的英文名可以百度查看

  • 如果字体名包含空格,必须使用引号包裹起来

  • 可以设置多个字体,按照从左到右的顺序逐个查找,找到就用,通常在最后写上serif(衬线字体)或sans-serif(非衬线字体)

  • windows默认字体是微软雅黑,Mac默认字体是San Francisco

字体风格

属性名:font-style

作用:控制字体是否为斜体

常用值:

  • normal:正常(默认值)

  • italic:斜体(使用字体自带的斜体效果),推荐使用这个

  • oblique:斜体(强制倾斜产生的斜体效果)

语法:

h1 {
    font-style: italic;
}

字体粗细

属性名:font-weight

作用:控制字体的粗细

关键词:

  • lighter:细
  • normal: 正常
  • bold:粗
  • bolder:很粗 (多数字体不支持)

数值:

  • 100~1000且无单位,数值越大,字体越粗(或一样粗,具体得看字体设计时的精确程度)

  • 100~300等同于lighter400~500等同于normal600及以上等同于bold

语法:

div {
    font-weight: bold;
}

div {
    font-weight: 600;
}

字体复合写法

属性名:font

作用:将上述所有字体相关的属性复合在一起编写

编写规则:

  • 字体大小、字体族必须都写上

  • 字体族必须是最后1位、字体大小必须是倒数第2位

  • 各个属性间用空格隔开

语法:

p {
    font: bold italic 40px "PingFang SC", "STHeiti";
}

文本属性

文本颜色

属性名:color

作用:控制文字的颜色

可选值:常用rgb/rgba、HEX/HEXA

  • 颜色名

  • rgbrgba

  • HEXHEXA (十六进制)

  • HSLHSLA

语法:

div {
    color: rgb(112, 45, 78);
}

文本间距

字母间距:letter-spacing,包括中文

单词间距:word-spacing(通过空格识别单词)

属性值为像素px,正值让间距增大,负值让间距缩小

语法:

p {
    letter-spacing: 10px;
    word-spacing:10px;
}

文本修饰

属性名:text-decoration

作用:控制文本的各种装饰线

可选值:

  • none: 无装饰线(常用)

  • underline:下划线(常用)

  • overline: 上划线

  • line-through: 删除线

可搭配如下值使用:

  • dotted:虚线
  • wavy:波浪线
  • 也可以指定线的颜色

语法:

p {
     text-decoration: overline;
     text-decoration: underline wavy;
     text-decoration: underline wavy red;
 }

文本缩进

属性名:text-indent

作用:控制文本首字母的缩进

属性值:css中的长度单位,如:px

语法:

div {
    text-indent: 40px;
}

文本对齐_水平

属性名:text-align

作用:控制文本的水平对齐方式

常用值:

  • left:左对齐(默认值)

  • right:右对齐

  • center:居中对齐

语法:

div {
    text-align: center;
}

行高

属性名:line-height

作用:控制一行文字的高度

可选值:

  • normal:由浏览器根据文字大小决定的一个默认值
  • 像素px
  • 数字:参考自身font-size的倍数(常用)
  • 百分比:参考自身font-size的百分比
div {
    font-size: 40px;
    line-height: 60px;
    background-color: red;
    /*
    line-height: normal%;
    line-height: 1.5;
    line-height: 150%;
    */
}

/* p继承了div中的行高,会直接计算,60*1.5 */
div{
    font-size: 40px;
    background-color: red;
    line-height: 1.5;
}

p{
    font-size: 60px;
    background-color: chocolate;
}

<div>雪压枝头低<p>虽低不着泥</p></div>

注意:

  1. line-height过小会产生文字重叠,且最小值是0,不能为负数

  2. line-height是可以继承的,且为了能更好的呈现文字,最好写数值

  3. line-heightheight是什么关系?设置了height,那么高度就是height的值,未设置height则根据line-height计算高度

应用场景:

  1. 多行文字控制行间距

  2. 对于单行文字:让height等于line-height,可以实现文字垂直居中

备注:由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果一行中都是文字,不会太影响观感。

文本对齐垂直

  1. 顶部:无需任何属性,在垂直方向上,默认就是顶部对齐
  2. 居中:对于单行文字,让height = line-height即可,多行的使用定位
div{
    font-size: 40px;
    background-color: red;
    height: 100px;
    /* 居中对齐 */
    line-height:100px;
    /* 底部对齐 */
    line-height:160px;
}
vertical-align

用于指定同一行元素之间,或表格单元格内文字的垂直对齐方式vertical-align不能控制块元素

常用值:

  • baseline(默认值):使元素的基线与父元素的基线对齐
  • top:使元素的顶部与其所在行的顶部对齐
  • middle:使元素的中部与父元素的基线加上父元素字母 x 的一半对齐
  • bottom:使元素的底部与其所在行的底部对齐
div{
    font-size: 80px;
    background-color: red;
}
span{
    font-size: 40px;
    background-color: red;
    vertical-align: top;
}

<div>学习前端<span>还是学习后端</span></div>

列表属性

列表相关的属性,可以作用在ul 、ol、li元素上

属性名含义属性值
list-style-type设置列表符号none:不显示前面的标识(常用)
square:实心方块
disc:圆形
decimal:数字
lower-roman:小写罗马字
upper-roman:大写罗马字
lower-alpha:小写字母
upper-alpha:大写字母
list-style-position设置列表符号的位置inside:在 li 的里面
outside:在 li 的外边
list-style-image自定义列表符号url(图片地址)
list-style复合属性没有数量、顺序的要求
    <style>
						ul {
						    list-style: decimal inside url("./图标.png");
						}
    </style>
    
<ul>
    <li>不知火舞</li>
    <li>干将莫邪</li>
    <li>上官婉儿</li>
</ul>

表格属性

边框相关属性

边框相关属性(其他元素也能用)

属性名含义属性值
border-width边框宽度CSS 中可用的长度值
border-color边框颜色CSS 中可用的颜色值
border-style边框风格none:默认值
solid:实线
dashed:虚线
dotted:点线
double:双实线
border边框复合属性没有数量、顺序的要求
table{
    border: 2px red dashed;
}

table独有属性

只有<table>标签才能使用

属性名功能属性值
table-layout设置列宽度auto:自动,列宽根据内容计算(默认值)
fixed:固定列宽,平均分
border-spacing单元格间距CSS 中可用的长度值
生效的前提:单元格边框不能合并
border-collapse合并单元格边框collapse:合并
separate:不合并
empty-cells隐藏没有内容的单元格show:显示,默认
hide:隐藏
生效前提:单元格不能合并
caption-side设置表格标题位置top:上面(默认值)
bottom:在表格下面
table{
    border: 2px red solid;
    width: 500px;
    table-layout: fixed;
    border-spacing: 2px;
    border-collapse: collapse;
    empty-cells: hide;
    caption-side: top;
}

背景属性

属性名功能属性值
background-color设置背景颜色符合 CSS 中颜色规范的值
默认背景颜色是 transparent
background-image设置背景图片url(图片的地址)
background-repeat设置背景重复方式repeat:重复,铺满整个元素,默认值
repeat-x:只在水平方向重复
repeat-y:只在垂直方向重复
no-repeat:不重复
background-position设置背景图位置通过关键字设置位置: 写两个值,用空格隔开
水平:left、 center、right
垂直:top、 center 、bottom
如果只写一个值,另一个方向的值取center

通过长度指定坐标位置:
以元素左上角,为坐标原点,设置图片左上角的位置
两个值,分别是 x 坐标和 y 坐标。
只写一个值,会被当做 x 坐标,y 坐标取 center
background复合属性写两个值,用空格隔开没有数量和顺序要求
div {
    width: 500px;
    height: 500px;
    background: red url("./图标.png") repeat left;
}

鼠标属性

属性名功能属性值
cursor设置鼠标光标的样式pointer:小手
move:移动图标
text:文字选择器
crosshair:十字架
wait:等待
help:帮助
div {
    width: 500px;
    height: 500px;
    background-color: blue;
    cursor: pointer;
  
    /* 自定义鼠标光标 */ 
  	cursor: url("./arrow.png"),pointer;
}
;