1.css三种引入方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <!-- 三种: 行间式 | 内联式 | 外联式 -->
    内联式:
    <!-- <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style> -->
    外联式:
    <link rel="stylesheet" type="text/css" href="01.css">
</head>
<body>
    <!-- 行间式 -->
    <!-- 1.在标签头部的style属性内 -->
    <!-- 2.属性值满足的是css语法 -->
    <!-- 3.属性值用key: value形式赋值,value具有单位 -->
    <!-- 4.属性值之间用;隔开 -->
    <!-- <div ></div> -->
    <!-- <hr  /> -->

    <!-- 内联式 -->
    <!-- 1.在style标签内(style标签一般作为head的子标签) -->
    <!-- 2.属性值满足的是css语法 -->
    <!-- 3.属性值用key: value形式赋值,value具有单位 -->
    <!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
    <!-- 5.格式: 选择器{样式块} -->
    <!-- <div></div> -->
​
    <!-- 外联式 -->
    <!-- 1.在外部css文件中 -->
    <!-- 2.属性值满足的是css语法 -->
    <!-- 3.属性值用key: value形式赋值,value具有单位 -->
    <!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
    <!-- 5.格式: 选择器{样式块} -->
    <!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
    <div></div>

</body>
​
</html>
注:三种方式间没有优先级
    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>
</body>
</html>

2.长度及颜色单位

1.长度单位

  • px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便

  • mm：毫米

  • cm：厘米

  • in：英寸

  • pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；

  • em：相当长度，通常1em=16px，应用于流式布局

2.颜色单位

  • 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

<!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>

3.常用样式

1、字体样式

  • font-family：字体族科，多值用于备用，以,隔开(当"STSong"不存在时,再选取"Arial")

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

  • font-size：字体大小(font-size: 20mm;)

  • font-style： 字体风格  normal | italic(斜体) | oblique(斜体)

  • font-weight：字体重量 normal | bold(加粗) | lighter(变细) | 100~900(900最粗)

  • line-height：行高(line-height:20mm;)

  • font：字重 风格 大小/行高 字族

2、文本样式

  • color：文本颜色

  • text-align：横向排列

left 居左 | center 居中 | right 居右

  • 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：允许在单词内换行
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style type="text/css">
        1.字体样式
        span {
            /*字体颜色*/
            color: red;
            /*字体水平居中方式:left center right*/
            text-align: center;
            /*字划线: underline line-through overline none*/
            text-decoration: overline;
            /*字间距*/
            letter-spacing: 3px;
            /*词间距*/
            word-spacing: 10px;
        }
        2.文本样式
        a {
            /*应用场景*/
            text-decoration: none;不设置字体下划线
        }
        div {
            width: 300px;
            /*显示方式*/
            display: inline-block;将块级标签设置成同行显示
        }
        div {
            font-size: 12px;
            /*垂直排列方式: top baseline bottom*/
            vertical-align: baseline;
            /*缩进*/
            text-indent: 2em;
        }
        /*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/
        .div {
            /*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
            word-break: break-all;
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <span>123 abc 呵呵</span>
    <!-- <a href="">123</a> -->
    <div>嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 嘻嘻 哈哈 嘿嘿 </div>
    <div>red yellow green big small red yellow green big small red</div>
    <div class="div">abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef</div>
</body>
</html>
3、背景样式

  • background-color：颜色

  • background-image：图片

background-image: url('bg.png');

  • background-repeat：重复

repeat | no-repeat(不重复) | repeat-x(x轴平铺) | repeat-y(y轴平铺)

  • background-position：定位

top | bottom | left | right | center
定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时,垂直默认center

  • background-attachment：滚动模式

scroll | fixed

前端之css引入方式/长度及颜色单位/常用样式的更多相关文章

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

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  2. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  3. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

  4. 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  5. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  6. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  7. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  8. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  9. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

随机推荐

  1. Thread--线程工作万花筒

    线程工作内存图. 线程状态.

  2. 计算机网络(6): http cookie

    Cookie作用: 1)帮助管理用户会话信息(用户需要记录的信息:登陆状态等) 2)跟踪浏览器的行为 3)用户自定义设置 实现方式: 当用户浏览带有Cookie的网站时,网站自动为其生成一个唯一的标志 ...

  3. Java中static变量作用和用法详解

    static表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static ...

  4. Python—使用Json序列化Datetime类型

    import json from datetime import datetime, date """ str,int,list,tuple,dict,bool,None ...

  5. diverta 2019 Programming Contest 2自闭记

    A 签到(a-b problem不用贴了吧,以后atcoder小于300分题均不贴代码) B 发现选择的p,q一定是其中两点间的距离,于是可以O(n2)枚举两点,再O(n2)判断,其实可以做到O(n3 ...

  6. ubuntu18安装pytorch1.3

    环境: ubuntu18 anaconda 创建一个新的环境 conda create -n env_name python=version 激活并进入环境中 conda activate env_n ...

  7. JavaScript 的数据结构与算法

    1数组 1.1方法列表 数组的常用方法如下: concat: 链接两个或者更多数据,并返回结果. every: 对数组中的每一项运行给定的函数,如果该函数对每一项都返回true,则返回true. fi ...

  8. Halcon系列（1） 菜鸟入门

    官方网站怎么使用HDevelop  :https://www.mvtec.com/products/halcon/halcon-tour

  9. v-cloak使用

    v-cloak:保持和元素实例的关联,直到结束编译后自动消失. v-cloak指令和CSS 规则一起用的时候,能够解决差值表达式闪烁的问题(即:可以隐藏未编译的标签直到实例准备完毕). 就拿上一段代码 ...

  10. iOS之NSString类型为什么要用copy修饰

    在开发的过程中,只知道NSString类型最好用copy修饰而不能用strong,但是不知道为什么,今天了解了下,总算搞明白了. 如下所示,当修饰符为copy时,因为NSMutableString是N ...