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. HDU 3018 欧拉回路

    HDU - 3018 Ant Country consist of N towns.There are M roads connecting the towns. Ant Tony,together ...

  2. HDU - 1251 字典树模板题

    Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀).  Input输入数据的第一部 ...

  3. TCP连接为什么三次握手四次挥手

    前几天面试某电商被问住了,问的很细,我就说了说连接过程,必然凉凉.在csdn上找了一篇很详细的博客.https://blog.csdn.net/hyg0811/article/details/1023 ...

  4. 关于 tf.image.crop_and_resize的使用

    https://blog.csdn.net/m0_38024332/article/details/81779544 关于 tf.image.crop_and_resize 的使用  最近在学习fas ...

  5. Java线程——线程习题（一）子线程执行10次后，主线程再运行5次，这样交替执行三遍

    题目:子线程执行10次后,主线程再运行5次,这样交替执行三遍 代码如下: package com.itheima.gan; /** * 子线程执行10次后,主线程再运行5次,这样交替执行三遍 * @a ...

  6. 吴裕雄--天生自然Linux操作系统：Linux 远程登录

    Linux一般作为服务器使用,而服务器一般放在机房,你不可能在机房操作你的Linux服务器. 这时我们就需要远程登录到Linux服务器来管理维护系统. Linux系统中是通过ssh服务实现的远程登录功 ...

  7. Spring--Spring 注入

    Spring 提供了三种主要的装配机制: 在 XML 中进行显式配置 在 Java 中进行显式配置 隐式的 bean 发现机制和自动装配 Spring 从两个角度来实现自动化装配: 组件扫描:Spri ...

  8. mybatis自动扫描的时候，接口跟xml文件的名字最好能够一一对应

    事实证明这是十分有好处的,当然,即便你不这么做,它也不一定会报invalid bound statement (not found),因为你不知道从哪儿拷来的配置文件可能从其他的地方做了配置,但是这么 ...

  9. java内存区域与内存溢出异常（1）

    一. 运行时数据区域 java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区域偶 1.程序计数器 程序计数器是一块较小的内存空间,作用是当前线程所执行的字节码的行号指示器 ...

  10. Python笔记_第一篇_面向过程_第一部分_5.Python数据类型之字典类型(dict)

    字典!在Python中字典是另一种可变容器模型,可以存储任意类型的对象.是Python存储数据类型的最高级(maybe). 特点:1. 字典的存储方式和其他类型数据略有不同,是通过键(key)和值(v ...