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. 关于阿里云的远程连接和轻型桌面（xfce4）安装

    这里用的阿里云服务器是轻量应用服务器 先通过网页端的远程连接进入服务器,然后 安装xfce4 (1)先安装更新:apt-get update. (2)安装xrdp:输入apt-get install ...

  2. github新建一个单页

    比如可以在github上打开的网页是这种网址形式的:https://01xunsicheng.github.io/yumeihua/ 1.登录后首页找到 New repository 2.新建一个文件 ...

  3. Springboot注解--@Controller和@RestController的区别

    1.使用@Controller 注解,在对应的方法上,视图解析器可以解析return 的jsp,html页面,并且跳转到相应页面:若返回json等内容到页面,则需要加@ResponseBody注解 2 ...

  4. java查看简单GC日志

    测试代码: public class GCtest { public static void main(String[] args) { for (int i = 0; i < 10000; i ...

  5. 计算机网络(2): http的基础上用SSL或TSL加密

    加密过程具体TCP实现 步骤 1 : 客户端通过发送Client Hello报文开始SSL通信(这里是在TCP的三次握手已经完成的基础上进行的).报文中包含客户端支持的SSL的指定版本.加密组件列表( ...

  6. oracle 学习（三）pl/sql语言函数

    系统内置函数 数学运算函数 字符串函数 统计函数 日期函数 用户定义函数:存储在数据库中的代码块,可以把值返回到调用程序.调用时如同系统函数一样 参数模式 IN模式:表示该参数时输入给函数的参数 OU ...

  7. JavaSE--【转】网络安全之证书、密钥、密钥库等名词解释

    转载 http://www.cnblogs.com/alanfang/p/5600449.html 那些证书相关的名词解释(SSL,X.509,PEM,DER,CRT,CER,KEY,CSR,P12等 ...

  8. 题解【语文1（chin1）- 理理思维】

    link 喵~珂朵莉树AC 珂朵莉树?见此处~ 这数据结构太暴力了,所以不讲了 Code: #include<iostream> #include<cstdio> #inclu ...

  9. 脚本kafka-configs.sh用法解析

    引用博客来自李志涛:https://www.cnblogs.com/lizherui/p/12275193.html 前言介绍 网络上针对脚本kafka-configs.sh用法,也有一些各种文章,但 ...

  10. 通过if语句实现for循环的提前结束

    /************************************************************************* > File Name: mybreakin ...