DAY45-前端入门

今日内容：

　　1、css的三种引用方式

　　2、样式与长度及颜色

　　3、常用样式

　　4、css选择器

一、css的三种引用方式

行间式：

1.在标签头部的style
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开

<div  style='100px;height=100px;backgroud-color:red;'>

</div>

内联式：

1.在style标签内部(style标签一般作为(head的子标签))
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开（一般独立分开赋值）
5.格式：选择器{样式块}

<style type='text/css'>
    div{
        width:100px;
        height:100px;
        backgroud-color:red;
    }
</style>

外联式：

1.在外部CSS文件中
2.属性值是css语法
3.属性值用Key：value形式赋值，value具有单位
4.属性值之间用;隔开（一般独立分开赋值）
5.格式：选择器{样式块}
6.将html和css文件建立连接：通过link标签链接外部CSS

<link rel='stylesheet' type='text/css' href='css/01.css'>

01.css
div{
        100px;
        height:100px;
        backgroud-color:red;
}

三种引入的优先级

注:三种方式之间没有优先级之分
1.三种方式协同布局,从上往下解析
2.不重复的属性一定为唯一位置
3.重复的属性采用覆盖赋值，保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style  type='text/css'>
        div{
            width:100px;
            height: 100px; 
            background-color: yellow;
        }       
    </style>
    <link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
    <div style='background-color: yellowgreen'></div>
</body>
</html>

02.css
div{
    100px;
    height: 100px; 
    background-color: red;
}

二、样式与长度及颜色

1.基本样式

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

2.长度

px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
mm：毫米
cm：厘米
in：英寸
pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
em：相当长度，通常1em=16px，应用于流式布局

 720pt = 10 in

 100mm = 10cm

 160px = 10em = 10rem

 50vw = 50% view width

3.颜色

rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc

颜色单位有：rgb rgba() #六个十六进制位 hsl()

 rgb:直接输入颜色的英文名称就行

 rgba():括号内输入三个0-255的数再输一个0-1之间的数（用于表示透明度） 如（101，120，123，0.8）

 #六个十六进制位：#后面跟六个十六进制位 如#FFFFFF

 hsl: H表示色相，S表示饱和度，L表示明度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>长度及颜色单位</title>
    <style type="text/css">
        body{
            background-color: yellowgreen;
        }
        div{
            /*长度单位*/
            /*px in pt mm cm em rem vw vh */
            /*100px;*/
            /*720 pt; 10in*/
            /*100mm;10cm*/
            /*160px;10em 10rem*/
            /*50vw; 50% view width*/
            width:100px;
            height: 100px;
            /*颜色单位*/
            /*单词 reg() rgba() #六个十六进制位 hsl()*/
            /*background-color: red;*/
            /*background-color: rgb(0,0,255);*/
            /*background-color: rgba(0,0,255,50);*/
            /*满足AABBCC可以简写为abc*/
            /*background-color: #a0c;*/
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

三、常用样式

1.常用字体样式

font-size: 30mm;(字体大小)

font-weight:900;(自重：bold、normal、light、100-900 )

line-height:50mm;(行高：行高设置大于等于字体大小，字体在行高中垂直居中显示)

font-style:normal;(字体样式：一般不关心)

font-family:"楷体"，“微软雅黑”（字族：可以自定义字族，当这个“楷体”字体不存在，再选取“微软雅黑”#备用字体）

font:lighter 50mm/80mm "微软雅黑"（CSS语法：空格隔开多个赋值的值，逗号隔开为一个值多值赋值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        span{
            font-size: 30mm;
            font-weight: 900;
            line-height: 50mm;
            font-style: normal;
            font-family:"楷体","微软雅黑";
            font:lighter 50mm/80mm "微软雅黑";
        }
    </style>
</head>
<body>
    <span>hello world!</span>
</body>
</html>

2.常用文本样式

color:red;(颜色)

text-align:center;(水平居中方式：left、center、right)

text-decoration:none;(字划线：underlin、line-through、overline、none)

letter-spacing:3xp;(字间距)

word-spacing:10px;(词间距)

vertical-align:baseline;(垂直排列方式：top、baseline、bottom)

text-indent:2em;(缩进)

word-break:break-all;(按标签设定的宽度强行换行，可以在单词（整体）内部换行)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style type ="text/css">
        span{
            color: red;
            text-align: center;
            text-decoration: none;
            letter-spacing: 3px;
            word-spacing: 10px;
        }
        div{
            width: 300px;
            display: inline-block;
        }
        div{
            font-size:12px;
            vertical-align: baseline;
            text-indent: 2em;
        }
        .div{
            word-break: break-all;
        }
        a{
            /*应用场景*/
            text-decoration: none;
        }
        h1{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <span>123 abc 哈哈</span>
    <!-- <a href="">123</a> -->
    <div>嘻嘻 哈哈 嘿嘿嘿 嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿嘻嘻 哈哈 嘿嘿嘿</div>
    <div>red yellow green red yellow greenred yellow greenred  greenred yellow green</div>
    <div class="div">abcdefasdasdqwdaskjhdksaaaaaaaaaaaaaaaaaaaaaaaaaaaahkjhqwiukdhaksihdiusahdiuhzxciuhzixzhciuxzhiuchzxiuhciuxzhciuzhiuziuxhciuxzhicuhxziuchxziuhciuxzhcixzuhciuxzhcizhx</div>
</body>
</html>

3.常用背景样式

background-image:url("");(背景图片)

background-repeat:no-repeat;（平铺：no-repeat、repeat-x、repeat-y）

background-position:right center;(定位：top、bottom、center、left、right#第一个值控制水平位置，第二个值控制垂直位置，可以用别的单位来填写如：10px 10px)

background-attachment:fixed(定位相关的涉及到滚动时的效果：scroll、fixed)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div{
            background-image: url("data/bg_repeat.gif");
            background-repeat: no-repeat;
            background-position: right center;
            background-attachment: fixed;
        }
        div{
            /*整体设置*/
            background: url("data/bg_repeat.png") 10px 10px no-repeat red;
        }
    </style>
</head>
<body>
    <div></div>
    br*100
</body>
</html>

四、css选择器

1.通配选择器

匹配html,body,以及body中的所有子标签，就是具有显示效果的所有标签。一般用于整体reset操作（清除系统自定义样式）

*{
    margin: 0;
}

2.标签选择器

匹配制定标签名的对应所有标签，运用场景并不多

div{
     100px;
    height: 100px;
    background-color: red;
}

3.类选择器

匹配指令类名对应的所有标签。类选择器为布局首选，建议基本都用类选择器进行布局

.dd{
    font-size: 50px
    }

4.id选择器

匹配制定ID名对应的唯一标签。html,css都是标记语言，所有对id可以进行多匹配，但JS是编程语言，只匹配到一个。一般不提倡用id选择器进行布局

#ele{
    color: blue;
}

基础选择器优先级

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