前端之文本、长度、颜色、字体、背景-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 漫天飞雪世情难却阅读(162) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部