前端之文本、长度、颜色、字体、背景-36

一.css三种引用方式
- 1.行间式
- 2.内联式
- 3.外联式
- 4.三种方式的优先级
二.样式与长度颜色
- 1.基本样式
- 2.长度
- 3.颜色
三.常用样式
- 1.字体样式
- 2.文本样式
- 3.背景样式
四.CSS选择器
- 1.基础选择器
- 2.基础选择器优先级

一.css三种引用方式

1.行间式

1.在标签头部的style属性内
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 行列式 --> <div style="width: 100px;height: 100px;</div> </body> </html>

2.内联式

1.在style标签内(style标签一般作为head的子标签)
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
5.格式:选择器{样式块}

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>Document</title> <!-- 内联式 --> <style> div{ width: 100px; height: 100px; background-color: blue } </style> </head> <body> <div></div> </body> </html>

3.外联式

1.在外部css文件中
2.属性值满足css语法
3.属性值用key:value形式赋值
4.属性值之间用";"号隔开
5.格式:选择器{样式块}
6.将html与css文件建立联系,通过link标签链接外部css(一般出现在head中)

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <title>Document</title> <!-- 外联式 --> <link rel="stylesheet" type="text/css" href="01.css"> </head> <body> <div></div> </body> </html>

css文件(01.css)

div{width: 200px;height: 200px; background-color: green; }

4.三种方式的优先级

三种方式间没有优先级,三种方式协同布局,不重复的属性都可以存在,重复的属性采用覆盖赋值,保留最后位置的属性值,行间式一定是逻辑上最后被解析的,!important会影响解析顺序.

二.样式与长度颜色

1.基本样式

<head><style> div{ width:100px; height:100px; background-color:red; } </style> </head>

2.长度

px:像素(pixel),屏幕上显示的最小单位
mm:毫米
cm:厘米
in:英寸
pt:点(point),一个标准的长度单位,1in = 72pt
em:相对长度,1em=16px

推荐使用px(像素)作为网页制作单位

3.颜色

英文单词:如red,green,yellow等
rgb():r表示red,g表示green,b表示bule,色彩三原色,三个值可为[0-255]数值或百分比,以逗号相隔
rgba():前三个值可为像素或百分比,最后一个为[0,1]数值,表示透明度
hsl():h为Hue,表示色相,s为Saturation,表示饱和度,l为Lightness,表示明度,第一个值为[0,360]数值,后两个值为百分比
在#后跟六个十六进制数,如#AABBCC,每两位一整体,分别表示色彩三原色,可以简写为#abc

三.常用样式

1.字体样式

font-size:字体大小
font-weight:字重,就是字体粗细 bold加粗/normal正常/lighter加细/100~900
line-height:行高.设置时大于等于字体大小,字体在行高中垂直居中显示
font-style:字体风格 normal正常/italic斜体
font-family:字族,设置字体类型,可设置多个值,如果前面的字体不存在或不起作用,会选择后面的字体
font:字重风格大小/行高字族

<style>span{ /*大小*/ font-size: 30mm; /*字重:bold normal lighter 100~900*/ font-weight:normal; /*行高:行高设置大于等于字体大小，字体在行高中垂直居中显示*/ line-height: 50mm; /*样式:一般不关心*/ font-style: oblique; /*字族：可以自定义字族*/ /*当STHuPo字体不起作用，不存在，再选择STCaiYun*/ font-family: "STHuPosss", "STCaiYun"; /*css语法：空格隔开为多个值赋值，逗号隔开为一个值多值赋值*/ font: lighter 50mm/80mm "STHuPosss", "STCaiYun"; } </style>

2.文本样式

color:文本颜色
text-decoration:字划线 underline下划线/line-through中划线/overline上划线
letter-spacing:字间距
word-spacing:词间距
text-align:文本对齐方式.横向排列 left居左/center居中/right居右
vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标 top：将支持valign特性的对象的内容与对象顶端对齐 text-top：将支持valign特性的对象的文本与对象顶端对齐 middle：将支持valign特性的对象的内容与对象中部对齐 bottom：将支持valign特性的对象的文本与对象底端对齐 text-bottom：将支持valign特性的对象的文本与对象底端对齐

word-break:自动换行 normal默认换行规则/break-all允许在单词内换行
text-transform:英文字母大小写的转换 capitalize首字母大写/upercase所有字母大写/lowercase所有字母小写
text-indent:可以控制段落的首行缩进与缩进的距离
margin:设置段落之间的距离

3.背景样式

padding: 0px; color: rgb(80, 80, 80); font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; text-align: justify;">background-image:指定在元素的背景中出现的背景图片

background-repeat:背景重复,通常配合background-image使用 no-repeat图片不重复/repeat-x图片水平地重复/repeat-y图片垂直地重复

background-position:背景定位,该属性将使用两个通过空格分隔的值,指定了图像的水平(x)和垂直(y)坐标,该属性可以接收不同的值类型

background-position:200px 25px
background-position:60% 35% /*关键字 top|bottom|left|right|center*/ background-position:right top

background-attachment:背景附着

background-attachment:scroll|fixed|local; scroll: 这将把背景修改为页面视图，因此它将在页面滚动时滚动。 fixed: 不管你是滚动页面还是背景设置的元素，它都会保持在相同的位置。 local:当滚动元素时，背景会随之滚动。

background:背景简写,将背景属性设置在一个声明中

body {background:url(a.jpg)               /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ }

四.CSS选择器

1.基础选择器

通配选择器

匹配文档中所有标签,指html.body以及body中所有具有显示效果的标签.

*{border:solid
}

标签选择器

匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div

div{color:green;font-size:20px; }

类选择器

匹配文档中所有拥有class属性且class属性值为类选择器名的标签

.red{color:red
}
如:<sub class="red"></sub>会匹配red类选择器

id选择器

匹配文档中所有拥有id属性且属性值为id选择器名的标签

#div{text-align:center;
}
如:<div id="div"></div> <span id="div"></span>均会匹配到名为div的id选择器

2.基础选择器优先级

基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

posted on 2018-12-27 20:03 漫天飞雪世情难却阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/jokezl/articles/10187026.html