CSS三种引入方式常用样式 CSS选择器

最新推荐文章于 2024-07-06 20:00:00 发布

转载最新推荐文章于 2024-07-06 20:00:00 发布 · 240 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/layerluo/p/9683205.html

本文详细介绍了CSS的三种引入方式：行间式、内联式、外联式，以及它们的优先级和常见单位如pt、px、em等。同时，深入探讨了字体、文本和背景样式，包括font-size、color、background-image等属性的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS三种引入方式

三种引入方式分别是：行间式、内联式、外联式

行间式

行间式：

1.在标签头部的style属性内

2.属性值满足的是css语法

3.属性值用key：value的形式赋值，value具有单位

4.属性值之间用；隔开

<div style="width: 100px; height: 100px; background-color: red"></div>

内联式

1.在style标签内（style标签一般作为head的子标签）

2.属性值满足的是css语法

3.属性值用key：value的形式赋值，value具有单位

4.属性值之间用；隔开

5.格式：选择器{样式块}

<style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
    </style>

外联式

1.在外部css文件中

2.属性值满足的是css语法

3.属性值用key：value的形式赋值，value具有单位

4.属性值之间用；隔开

5.格式：选择器{样式块}

6.将html与css文件建立联系：html通过link标签链接外部css（一般写在head中）

<link rel="stylesheet" type="text/css" href="01.css">

三种引入的优先级

三种方式没有优先级

1.三种方式是协同布局的

2.不重复的属性一定为唯一位置的唯一值

3.重复的属性采用覆盖赋值，保留最后位置的属性值

4.行间式一定是逻辑上最后被解析的位置（js正常操作的就是行间式）

!important 会影响优先级。有！important的会在页面上显示最终效果，不管有没有行间式，如果没有行间式将根据内联式外联式的顺序来显示效果，在最后的将最终显示效果

长度及颜色单位

基本样式

<head>
    <style type="text/css">
        body {
            width: 200px;
            height:200px;
            background-color: yellow; 
        }
   </style>
</head>

长度

长度单位

pt：点，一个标准的长度单位，72pt=1in

px：像素

mm：毫米

cm：厘米

in：英寸

em：想当长度，通常 1em=16px 用于流失布局

rem 和em一样

vw ： 50%vw 表示当前浏览器宽度的50%

vh： 50%vw 表示当前浏览器高度的50%

颜色单位

rgb（0，0，0）三个值范围为 0~255 数值或者百分比

rgba（0,0,0,0）前三个值可为像素或是百分比，最后一个为 0~1的数值表示透明度

单词：直接使用单词也可以

#FFFFFF ：六个十六进制位，每两位以整体，如果满足#AABBCC 可以简写成#abc

样式

字体样式

font-size ：30mm 大小

font-weight：900 字重 100~900

font-height：50mm 行高：行高设置大于等于字体大小，字体在行高中垂直居中显示

font-style：字体风格 normal | italic |oblique

font-family ：字族可以自定义字族

font-family: 华文彩云，微软雅黑;

当华文彩云不存在或不起作用，在选取微软雅黑

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

文本样式

color 文本颜色

text-align：水平居中方式 left|center|right

text-decoration 字划线 underline|line-through | overline none

letter-spacing：字间距

word-spacing 词间距

text-indent 字体缩进

vertical-align 纵向排列

baseline：将支持valign特性的对象的内容与基线对齐 
sub：垂直对齐文本的下标 
super：垂直对齐文本的上标 
top：将支持valign特性的对象的内容与对象顶端对齐 
text-top：将支持valign特性的对象的文本与对象顶端对齐 
middle：将支持valign特性的对象的内容与对象中部对齐 
bottom：将支持valign特性的对象的文本与对象底端对齐 
text-bottom：将支持valign特性的对象的文本与对象底端对齐

word-break 自动换行

normal：默认换行规则
break-all：允许在单词内换行

背景样式

background-image：url（）背景图片

background-repeat：平铺 no-repeat|repeat-x|repeat-y|repeat

background-color：颜色

background-position ：定位 top|bottom|left|right|center

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

background-attachment：滚动模式 scroll | fixed

CSS选择器

1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)

* {
    border: solid;
}

2.标签选择器(标签名):匹配指定标签名的对应所有标签

div {
    width: 100px;
    height: 100px;
    background-color: red;
}
section {
    width: 200px;
    height: 200px;
    background-color: yellow;
}

3.类选择器(.):匹配指定类名对应的所有标签

.dd {
    color:blue;
    font-size: 50px;
}

4.id选择器(#):匹配指定id名对应的唯一标签

html,css都是标记语言,所有对id可以进行多匹配,但js是编程语言.只能匹配到一个

#ele {
    color: blue;
}

总结

1.通配选择器一般用于整体reset操作（reset操作：清楚系统自定义样式）

    * {
        margin: 0;
    }

2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局

3.类选择器为布局首选(建议基本全用class选择器进行布局)

基本选择器优先级:id > class > 标签 > 通配(*)

转载于:https://www.cnblogs.com/layerluo/p/9683205.html

CSS三种引入方式 常用样式 CSS选择器

CSS三种引入方式

行间式

内联式

外联式

三种引入的优先级

长度及颜色单位

长度

颜色单位

样式

字体样式

文本样式

背景样式

CSS选择器

CSS三种引入方式常用样式 CSS选择器