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. Nginx系列p1:安装

    学习新的知识都要从搭建环境开始,今天我们就来学习搭建一个 Nginx 环境. 环境:Ubuntu16.04 STL Nginx 1.16.1 Stable version 前言:当然可以通过 apt- ...

  2. git commit 后 尚未push到远程，撤销commit

    执行commit后,还没执行push时,想要撤销这次的commit,该怎么办? 解决方案: 使用命令: git reset --soft HEAD^ 这样就成功撤销了commit,如果想要连着add也 ...

  3. dp高难本攻略

    903. DI 序列的有效排列 public int numPermsDISequence(String S) { int n=S.length(); int [][]dp=new int [n+1] ...

  4. MVC——再探MVC——增删查改

    MVC 是我大学学的比较弱的,甚至不懂原理.(那时候都在准备蓝桥杯 软件杯比赛.) 在重新学 肯定要学MVC 现在知道了为什么叫MVC了  MVC是怎么工作的 MVC 是一个设计模式 控制器(Cont ...

  5. Linux安装maven超级详细步骤

    一 服务器联网情况下安装maven 1.安装wget命令 如果需要通过使用wget命令,直接通过网络下载maven安装包时,需要在linux系统中安装wget命令. yum -y install wg ...

  6. JDBC-使用Java连接数据库-基础篇

    这是小主第一次写Java连接数据库博客,初学Java之时,Java连接数据库是我最头疼的,不过经过一个月的学习,也差不多略有收获,所以给大家分享一下. Java连接数据库大约需要五大步骤: 创建数据库 ...

  7. Django框架(十一)：模板介绍、模板语言、模板继承、HTML转义

    1. 模板介绍 1.1 模板的功能 产生html,控制页面上展示的内容.模板文件不仅仅是一个html文件. 模板文件包含两部分内容: 静态内容:css.js.html. 动态内容:用于动态去产生一些页 ...

  8. MyBatis从入门到精通(第4章)：MyBatis动态SQL【foreach、bind、OGNL用法】

    (第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...

  9. selector的使用，android:clickable="true"

    <ImageView android:id="@+id/patrol_buzzer_btn" android:layout_width="80dp" an ...

  10. c语言中命令行参数argc,argv[]详解

    main(int argc,char *argv[ ]) 1.argc为整数 2.argv为指针的指针(可理解为:char **argv or: char *argv[] or: char argv[ ...