前端第二天

2018-09-20 本文已影响0人 knot98

前端第二天

一、css三种引入方式

1、行间式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 行间式 -->
        <!-- 1. 在标签头部的style属性内 -->
        <!-- 2. 属性值满足的是css语法 -->
        <!-- 3. 属性值用key: value形式赋值，value具有单位 -->
        <!-- 4. 属性值之间用 ; 隔开 -->
    <div style="width: 100px; height: 100px;background-color: yellow"></div>

    <div></div>
</body>
</html>

2、内联式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 内联式 -->
        <!-- 1. 在style标签内(style标签一般作为head的子标签) -->
        <!-- 2. 属性值满足的是css语法 -->
        <!-- 3. 属性值用key: value形式赋值，value具有单位 -->
        <!-- 4. 属性值之间用 ; 隔开(一般独行分开赋值) -->
        <!-- 5. 格式： 选择器{样式块} -->
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style> 
</head>
<body>
    <div></div>
</body>
</html>

3、外联式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>   
    <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
    <div></div> 
</body>
</html>

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

注: 三种方式间没有优先级

三种方式协同布局
不重复的属性一定为唯一位置的唯一值
重复的属性采用覆盖赋值,保留最后位置的属性值
行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
!important 会影响优先级

二、长度及颜色单位

1、代码示例：

<!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*/
            width: 100px;
            /*width: 720pt; 10in*/
            /*width: 100mm; 10cm*/
            /*width: 10em; 通常160px 10rem*/
            /*width: 50vw; 50% view width*/
            height: 100px;
            /*颜色单位*/
            /*单词 rgb() rgba() #六个十六进制位 hsl()*/
            /*background-color: cyan;*/
            /*background-color: rgb(255, 0, 0);*/
            /*background-color: rgba(255, 0, 0, 0);*/
            /*满足AABBCC形式可以简写为abc*/
            background-color: #a0c
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、长度单位：

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

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

v_test：熟悉所有的长度单位与颜色表示方式

三、常用样式

1、字体样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style type="text/css">
        span {
            /*大小*/
            font-size: 30mm;
            /*字重: bold normal lighter 100~900*/
            font-weight: 900;
            /*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/
            line-height: 50mm;
            /*样式: 一般不关心*/
            font-style: normal;
            /*字族:可以自定义字族*/
            /*当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */
            /*备用字族*/
            font-family: "Segoe UI Emoji", "微软雅黑";

            /*css语法: 空格隔开为多个值赋值, ,隔开为一个值多值赋值*/
            font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
        }
    </style>
</head>
<body>
    <span>123abc呵呵</span>
</body>
</html>

font-family：字体族科，多值用于备用，以 '英文逗号' 隔开

font-family: "STSong", "Arial";

font-size：字体大小
font-style：字体风格 normal | italic | oblique
font-weight：字体重量 normal | bold | lighter | 100~900
line-height：行高
font：字重风格大小/行高字族

2、文本样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style type="text/css">
        h1 {
            text-align: center;
        }
        span {
            /*颜色*/
            color: red;
            /*水平居中方式:left center right*/
            text-align: center;
            /*字划线: underline(下划线)  line-through(中划线) overline(上划线) none(取消划线)*/
            text-decoration: line-through;
            /*字间距*/
            letter-spacing: 3px;
            /*词间距*/
            word-spacing: 10px;
        }
        div {
            width:300px;
            /*显示方式*/
            display: inline-block;
        }
        /*对齐方式*/
        div {
            font-size: 12px;
            /*垂直排列方式: top baseline bottom*/
            vertical-align: baseline;
            /*缩进(一个em相当于一个中文汉字的大小)*/
            text-indent: 2em;
        }
        /*遇到连体的英文,html将其解析成一个单词(整体)*/
        .div {
            /*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
            word-break: break-all;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <span>123 abc 呵呵</span>
    <div>嘻嘻 哼哼 呵呵 哈哈</div>
    <div>red yellow green big small red yellow green big small</div>

    <div class="div">jljskladjfasdlfjklsajdfjaslkfjansfoiasfjnasddfjasdfjioasdjfmnasdfjasodifjoiasdjfmackjnasdojflaskd'fkamjasdfjkdfjasdmnfkasdfjojsadoifjasdofjsdo</div>
</body>
</html>

color：文本颜色
text-align：横向排列
vertical-align：纵向排列

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

text-indent：字体缩减
text-decoration：字划线
letter-spacing：字间距
word-spacing：词间距
word-break：自动换行

normal：   默认换行规则
break-all：允许在单词内换行

3、背景样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        div {
            /*背景图片*/
            background-image: url("data/bg_repeat.gif");
            /*平铺:  no-repeat(不平铺) repeat-x(x轴平铺) repeat(平铺) */
            background-repeat: no-repeat;
            /*
                定位: 设置一个值为10px 第二个值默认center
                多个值: 第一个值控制水平位置,第二个值控制垂直位置  
            */
            background-position: 10px;
            /*  : scroll  fixed*/
            background-attachment:scroll;
        }
        div {
            /*整体设置*/
            background: url("data/bg_corgi.png") 10px 10px no-repeat red;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- br*100 -->
</body>
</html>

background-color：颜色
background-image：图片
background-repeat：重复
background-position：定位

v_hint：定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center

background-attachment：滚动模式 scroll | fixed

v_eg：父级设置属性，子集内容超出父级范围

v_hint：掌握基本属性

四、css选择器

一、基础选择器

1、通配选择器

- {
    border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签

2、标签选择器

div {
    background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span

3、类选择器

.red {
    color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配

4、id选择器

#div {
    text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配

5、代码示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
            /*2.标签选择器(标签名): 匹配指定标签名的对应所有标签*/
            div {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            section {
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
            /*3. 类选择器(.): 匹配指定类名对应的所有标签*/
            .dd {
            font-size: 50px;
            }
            /*4. id选择器(#): 匹配指定id名对应的唯一标签*/
                /*html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言 . 只能匹配到一个*/
                #ele {
                    color: blue;
                }
    </style>
</head>
<body>
    <div class="dd">d_1</div>
    <section id="ele">s_1</section>
    <div>d_2</div>
    <section class="dd">s_2</section>

    <span></span>
</body>
</html>

6、总结

通配选择器一般用于整体reset操作(reset操作: 清除系统自定义样式)
标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
类选择器为布局首选(建议基本全用class选择器进行布局)

二、基础选择器优先级

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

v_hint：id选择器必须保证单文档的唯一性

三、组合选择器

1、群组选择器

div, span, .red, #div {
    color: red;
}

一次性控制多个选择器
选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器

子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}

一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
每一个选择器位均可以为任意合法选择器或选择器组合
相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

四、组合选择器优先级

组合选择器优先级与权值相关，权值为权重和
权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

选择器权值比较，只关心权重和，不更新选择器位置
不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

五、属性选择器

[attr]：匹配拥有attr属性的标签
[attr=val]：匹配拥有attr属性，属性值为val的标签
[attr^=val]：匹配拥有attr属性，属性值以val开头的标签
[attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
[attr*=val]：匹配拥有attr属性，属性值包含val的标签

前端第二天

前端第二天

目录:

一、css三种引入方式

1、行间式

2、内联式

3、外联式

注: 三种方式间没有优先级

二、长度及颜色单位

1、代码示例：

2、长度单位：

3、颜色单位：

v_test：熟悉所有的长度单位与颜色表示方式

三、常用样式

1、字体样式

2、文本样式

3、背景样式

v_hint：定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center

v_eg：父级设置属性，子集内容超出父级范围

v_hint：掌握基本属性

四、css选择器

一、基础选择器

1、通配选择器

2、标签选择器

3、类选择器

4、id选择器

5、代码示例

6、总结

二、基础选择器优先级

v_hint：id选择器必须保证单文档的唯一性

三、组合选择器

1、群组选择器

2、子代(后代)选择器

3、相邻(兄弟)选择器

四、组合选择器优先级

五、属性选择器

v_hint：属性选择器权重等价于类

v_test：掌握所有选择器，并熟知选择器优先级

猜你喜欢

热点阅读