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. tkinter对话框和窗体

    1.标准对话框(tkinter.messagebox) 常用标准对话框 tkinter.messagebox.askokcancel tkinter.messagebox.askquestiontki ...

  2. python刷LeetCode：2.两数相加

    难度等级:中等 题目描述: 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返 ...

  3. jsp的appilication.getInitParameter()方法无法获取到值的问题

    背景介绍 今天研究jsp的内置对象时发现,使用appilication.getInitParameter()从web.xml文件中获取值的时候,死活获取不到,折腾了将近一个小时,后来出现问题的原因却让 ...

  4. Java学习笔记--精品札记

    forech循环增强版(JDK1.7新特性) for(数组单位元素类型 i:遍历目标数组){ 代码块 } char(只能放单个字符)数组可以直接遍历不需要循环,其他数组不可以,必须遍历 toStrin ...

  5. Aras Innovator时间验证

    //方法名:bcs_Nexteer_CheckTime //功能描述:开始和结束日期对比 //原作者:joe //创建时间:20141226 //版权所有(C)JOE.FAN //debugger; ...

  6. order by rand()优化

    优化前: SELECT id, loan_id, NAME, company FROM tablename WHERE time BETWEEN 1522512000 AND 1525103999 A ...

  7. 开启新项目时启动tomcat的一个小问题

    Application context 这里为啥只有是空的,才能正常启动tomcat?

  8. Java机器学习软件介绍

    Java机器学习软件介绍 编写程序是最好的学习机器学习的方法.你可以从头开始编写算法,但是如果你要取得更多的进展,建议你采用现有的开源库.在这篇文章中你会发现有关Java中机器学习的主要平台和开放源码 ...

  9. Insulator|enhancer|LCR|EKLF|CTCF|调控基因印记| A-USF|HATs|ChIP|Chip-seq|PAGE|

    表观遗传学 转录因子 基本转录因子:TFIID.A.B.F.E.H. Pol II… 基转录因子具有稳定作用 组织特异性转录因子:GATA.EKLF.Bcl11A… 特异性是在特定组织中的细胞中时与细 ...

  10. Python——气象数据分析

    将对意大利北部沿海地区的气象数据进行分析与可视化.我们在实验过程中先会运用 Python 中 matplotlib 库的对数据进行图表化处理,然后调用 scikit-learn 库当中的的 SVM 库 ...