前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器

 CSS的引入方式、长度与颜色单位、常用样式、选择器

一、CSS的三种引入方式

1、行间式

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

</html>

2、内联式

<!doctype html>
<html>
    <head>
      <meta charset="UTF-8">
      <title>内联式</title>
          <style>
               div{
                    width:100px;
                    height:100px;
                    background:yellow;
               }
          </style>
    </head>
    <body>
      <!-- 1.在style标签内(style标签一般为head的子标签) -->
      <!-- 2.属性值满足CSS语法 -->
      <!-- 3.属性值用key:value形式赋值,value具有单位 -->
      <!-- 4.属性值之间用;隔开 -->
       <!-- 5.格式:选择器 {样式快}-->
        <div></div>
    </body>

</html>

3、外联式

div{
    width: 200px;
    height: 200px;
    background-color: green;
}
2.1Css.css
<!DOCTYPE html>
<html lang="en">
    <!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>外联式</title>
        <link rel="stylesheet" type="text/css" href="2.1Css.css">
    </head>
    <body>
      <!-- 1.在外部css文件中 -->
      <!-- 2.属性值满足的是css语法 -->
      <!-- 3.属性值用key: value形式赋值,value具有单位 -->
      <!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
      <!-- 5.格式: 选择器{样式块} -->
      <!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
        <div></div>
    </body>

4、三种引入方式的优先级

1.三种方式协同布局:
2.不重复的属性为属性第一次出现时的值
3.重复的属性采用覆盖赋值,保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三种引入优先级</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: yellow!important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
    <div style="background-color: yellowgreen"></div>
    <!-- <div></div> -->
</body>
</html>



<!--  最后显示的是黄色,因为黄色加了!important -->
<!--  如果去掉!important,显示的颜色是黄绿色 -->
View Code

二、长度及颜色单位

1、长度单位

1. px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
2. mm:毫米
3. cm:厘米
4. in:英寸
5. pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;
6. em:相当长度,通常1em=16px,应用于流式布局
7.vw、vh:view width,view height 百分比
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>长度单位</title>
    <style type="text/css">
        body {
            background-color: yellowgreen; 
        }
        div {
                        width: 100px;
            /* 720pt; 10in*/
            /* 100mm; 10cm*/
            /* 10em; 通常160px 10rem*/
            /* 50vw; 50% view width*/
            height: 100px;
                }
        </style>
</head>
<body>
    <div></div>
</body>
</html>
View Code

2、颜色单位

1. rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)
2. rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)
3. hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)
4. hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)
5. #AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>长度及颜色单位</title>
    <style type="text/css">
        body {
            background-color: yellowgreen; 
        }
        div {
            /*颜色单位*/
            /*单词 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>
View Code

三、常用样式

1、字体样式

1. font-size:字体大小
2. font-style: 字体风格  normal | italic | oblique
3. font-weight:字体重量 normal | bold | lighter | 100~900
4. line-height:行高
5. font-family:字体族科,多值用于备用,以,隔开,第一个字体不存在,使用第二个字体
   eg:font-family:"STsong","STheiti";
6. font:字重 风格 大小/行高 字族
   eg:font:lighter 50px/100px "STsong","STheiti";

2、文本样式

1. color:颜色
2. text-align:水平排列   
        left 居左
        center 居中
        right 居右

3. text-decoration:字划线
        underline   下划线
        line-through   中划线
        overline    下划线
        none    没有划线,主要应用于超链接的去除下划线

4. text-indent:缩进

5. letter-spacing:字间距

6. word-spacing:词间距

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

8.word-break:自动换行
        normal:默认换行规则
        break-all:允许在单词内换行

3、背景样式

1. background-color:颜色

2. background-image:图片,在url中说明图片的路径
    eg:background-image: url(bg.png);

3. background-repeat:重复
        no-repeat:不重复
        repeat-x:在X轴上重复
        repeat-y:在y轴上重复
        repeat:重复

4. background-position:定位,第一个值表示水平方向,第二个值表示垂直方向。定位值可为方位词、百分比及固定值,值个数默认为两位(水平/垂直),一个值时垂直默认center
        top | bottom | left | right | center
    eg:background-position:right,center   

5. background-attachment:滚动模式 

6. background:整体设置
 background: 背景图片 图片水平位置 图片垂直位置 图片重复 背景颜色
  eg:background: url("data/bg_repeat.gif") 10px 10px no-repeat red

四、基础选择器

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、选择器的优先级

id > class > 标签 > 通配

6、基础选择器总结

1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
        * {
            margin: 0;
        }
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
3.类选择器为布局首选(建议基本全用class选择器进行布局)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        /*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/
        /** {
            border: solid;
        }*/

        /*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名对应的唯一标签*/
        #ele {
            color: blue;
        }

        * {
            text-align: left;
        }
        div {
            text-align: right;
        }
        .d {
            text-align: center;
        }
        #ele {
            text-align: left;
        }
    
    </style>
</head>
<body>
    <div class="dd">d_1</div>
    <section>s_1</section>
    <div class="d" id="ele">d_2</div>
    <section class="dd">s_2</section>
    <span></span>
</body>
</html>
View Code
原文地址:https://www.cnblogs.com/linagcheng/p/9681727.html