初识CSS3

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量227 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_77391235/article/details/129904480
版权

目录

CSS样式规则

CSS样式表

行内式

内嵌式

外链式（链入式）

导入式

CSS基础选择器

标签选择器

类选择器

id选择器

通配符选择器

设置文本样式

CSS字体样式属性

CSS文本外观属性

高级特性

CSS复合选择器

CSS的层叠性和继承性

CSS的优先级

CSS样式规则

选择器用于指定需要改变样式的HTML标签。

选择器 { 属性1:属性值1; 属性2:属性值2; ...}

如果属性的属性值由多个单词组成且中间包含空格，则必须加引号。

p {font-family:"Times New Roman";}

在CSS代码中空格不被解析，花括号以及分号前后的空格可有可无。属性值和单位之间不允许出现空格。

h1 {
    color:green;
    font-size:14px;    
}

CSS样式表

行内式

<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>
<h1 style="font-size:20px; color:blue;">CSS行内式修饰一级标题的字体大小和颜色</h1>

内嵌式

type="text/css"使浏览器知道<stype>标签包含的是CSS代码。

<head>
<style type="text/css">
    选择器 { 属性1:属性值1; 属性2:属性值2; }
</style>
</head>

<style>标签一般位于<title>标签之后。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内嵌式引入CSS样式表</title>
    <style type="text/css">
        h2{text-align:center;}
        p{
            font-size:16px;
            font-family:"楷体";
            color:purple;
            text-decoration:underline;
        }
    </style>
</head>
<body>
    <h2>内嵌式CSS样式</h2>
    <p>style标签可以定义内嵌式CSS样式表</p>
</body>
</html>

外链式（链入式）

同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link />标签链接多个CSS样式表。实现了将结构和样式完全分离。

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中

type:定义所链接文档的类型。

rel:定义当前文档与被链接文档之间的关系，"stylesheet"表示被链接的文档是一个样式表文件。

<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

导入式

与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用style标签，并在<style>标签内的开头处使用@import语句，即可导入外部样式表文件。

<style type="text/css">
    @import url(css文件路径); 或 @import "css文件路径";
    /* 在此还可以存放其他css样式 */
</style>

CSS基础选择器

标签选择器

能快速为页面中同类型的标签统一样式，但不能设计差异化样式。

用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

标签名 { 属性1:属性值1; 属性2:属性值2; }

使用p选择器定义HTML页面中所有段落的样式。

p{font-size:12px; color:#666; font-family:"微软雅黑";}

类选择器

可以为元素对象定义单独的样式。

用 . 进行标识，后面紧跟类名。

.类名{属性1:属性值1; 属性2:属性值2; }

 多个标签可以使用同一个类名。多个类名之间需要用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        .red{color:red;}
        .green{color:green;}
        .font22{font-size:22px;}
        p{
            text-decoration:underline;
            font-family:"微软雅黑";
        }
    </style>
</head>
<body>
    <h2 class="red">二级标题文本</h2>
    <p class="green font22">段落一文本内容</p>
    <p class="red font22">段落二文本内容</p>
    <p>段落三文本内容</p>
</body>
</html>

id选择器

不支持像类选择器那样定义多个值。

#id名 {属性1:属性值1; 属性2:属性值2; }

通配符选择器

能匹配页面中所有的元素。

*{属性1:属性值1; 属性2:属性值2; }

设置文本样式

CSS字体样式属性

font-size:字号大小

font-family:字体

英文字体不需要加引号，设置英文字体时，英文字体名称必须位于中文字体名称之前。

body{font-family: Arial,"微软雅黑","宋体","黑体";}

font-weight:字体粗细

值描述
normal默认值。定义标准的字符
bold定义粗体字符
bolder定义更粗的字符
lighter定义更细的字符
100~900(100的整数倍)定义由细到粗的字符。400等同于normal，700等同于bold，值越大字体越粗

font-style:字体风格

normal默认值，浏览器会显示标准的字体样式
italic浏览器会显示斜体的字体样式
oblique浏览器会显示倾斜的字体样式

font:综合设置字体样式

使用font属性时，必须按照下面语法格式中的顺序书写。

不需要设置的属性可以省略(取默认值)，但必须保留font-size和font-family属性，否则font属性不起作用。

选择器 {font: font-style font-weight font-size/line-height font-family;}

下面两段代码等价：

line-height指行高。

p{
    font-family:Arily,"宋体";
    font-size:30px;
    font-style:italic;
    font-weight:bold;
    line-height:40px;
}
p{font: italic bold 30px/40px Arial,"宋体";}

CSS文本外观属性

color:文本颜色

预定义的颜色值red、green、biue
十六进制#FF000、#FF6600、#29D794
RGB代码红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)
p{
    color:red;
}

letter-spacing:字间距

字符与字符之间的空白，其属性值可以为不同单位的数值。定义字间距时，允许使用负值，默认属性值为normal。

h2{letter-spacing:20px;}
h3{letter-spacing:-0.5em;}

word-spacing:单词间距

用于定义英文单词之间的间距，对中文字符无效，其属性值可以为不同单位的数值，允许使用负值，默认属性值为normal。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>letter-spacing和word-spacing</title>
    <style type="text/css">
        .letter{letter-spacing:20px;}
        .word{word-spacing:20px;}
    </style>
</head>
<body>
    <p class="letter">letter spacing(字母间距)</p>
    <p class="word">word spacing(单词间距)</p>
</body>
</html>

line-height:行间距

text-transform:文本转换

none不转换（默认值）
capitalize首字母大写
uppercase全部字符转换为大写
lowercase全部字符转换为小写

text-decoration:文本装饰

none没有装饰（正常文本默认值）
underline下划线
overline上划线
line-through删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本装饰text-decoration</title>
    <style type="text/css">
        .one{text-decoration:underline;}
        .two{text-decoration:underline line-through;}
    </style>
</head>
<body>
    <p class="one">设置下划线</p>
    <p class="two">同时设置下划线和删除线</p>
</body>
</html>

text-align:水平对齐方式

仅适用于块级元素，对行内元素无效。

text-indent:首行缩进

仅适用于块级元素，对行内元素无效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本装饰text-decoration</title>
    <style type="text/css">
        p{font-size:14px;}
        .one{text-indent:2em;}
        .two{text-indent:50px;}
    </style>
</head>
<body>
    <p class="one">首行缩进，text-indent:2em;。</p>
    <p class="two">首行缩进，text-indent:50px;。</p>
</body>
</html>

white-space:空白符处理

使用HTML制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。

在CSS中，使用white-spacing属性可以设置空白符的处理方式。

normal常规(默认值)，文本中的空格、空行无效（不论多少只显示一个），满行后自动换行
pre预格式化，按文档的书写格式保留空格、空行，原样显示
nowrap空格空行无效，强制文本不能换行，除非遇到<br/>，内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条

text-shadow:阴影效果

水平阴影的距离、垂直阴影的距离，模糊半径，阴影颜色

距离参数为负时可以改变阴影投射方向。

选择器{text-shadow:h-shadow v-shadow blur color;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-shadow属性</title>
    <style type="text/css">
        p{
            font-size:14px;
            text-shadow:10px 10px 10px red;
        }
        
    </style>
</head>
<body>
    <p>hello css3</p>
</body>
</html>

text-overflow:处理对象内溢出文本

选择器{text-overflow:属性值;}
clip修剪溢出文本，不显示省略标签"..."
ellipsis用省略标签"..."替代被修剪文本，省略标签插入的位置是最后一个字符
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow属性</title>
    <style type="text/css">
        p{
            /*1、为包含文本的对象定义宽度*/
            width:200px;
            height:100px;
            border:1px solid #000;
            white-space:nowrap; /*2、样式强制文本不能换行*/
            overflow:hidden; /*3、样式隐藏溢出文本*/
            text-overflow:ellipsis; /*4、样式显示省略标签*/
        }
        
    </style>
</head>
<body>
    <p>把很长一段文本溢出的内容隐藏，出现省略号</p>
</body>
</html>

word-wrap属性

实现长单词和URL地址自动换行。

选择器{word-wrap:属性值;}
值描述
normal只在允许的断字点换行（浏览器保持默认处理）
break-word在长单词或URL地址内部进行换行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>word-wrap属性</title>
    <style type="text/css">
        p{
            width:100px;
            height:100px;
            border:1px solid #000;
        }
        .break_word{word-wrap:break-word;} /*网址在段落内部换行*/
        
    </style>
</head>
<body>
    <span>word-wrap:normal;</span>
    <p>网页平面设计学院http://icd.XXXXXX.cn</p> /*段落文本中的URL地址会溢出边框*/
    <span>word-wrap:break-word;</span>
    <p class="break_word">网页平面设计学院http://icd.XXXXXX.cn</p> /*URL地址会沿边框自动换行*/
</body>
</html>

高级特性

CSS复合选择器

标签指定式选择器（交集选择器）

由两个选择器构成，第一个为标签选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签指定式选择器的应用</title>
    <style type="text/css">
        p{color:blue;}
        .special{color:green;}
        p.special{color:red;} /*标签指定式选择器*/
    </style>
</head>
<body>
    <p>普通段落文本（蓝色）</p>
    <p class="special">指定了.special类的段落文本（红色）</p>
    <h3 class="special">指定了.special类的段落文本（绿色）</p>
</body>
</html>

/*
    标签选择器p.special定义的样式仅适用于<p class="special">标签，而不会影响使用了special类的其他标签。
*/

后代选择器

外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签嵌套时，内层标签就成为外层标签的后代。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签指定式选择器的应用</title>
    <style type="text/css">
        p strong{color:red;} /*后代选择器*/
        strong{color:blue;}
    </style>
</head>
<body>
    <p>段落文本<strong>嵌套在段落中，strong标签定义的文本（红色）。</strong></p>
    <strong>嵌套之外由strong标签定义的文本（蓝色）。</strong>
</body>
</html>

/*
    <p>标签内嵌套<strong>标签，可以使用后代选择器对其中的<strong>标签进行控制。
*/

并集选择器

由各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、类选择器、id选择器）都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css">
        h2,h3,p{color:red; font-size:14px;} /*不同标签组成的并集选择器*/
        h3,.special,#one{text-decoration:underline;} /*标签、类、id组成的并集选择器*/
    </style>
</head>
<body>
    <h2>二级标题</h2>
    <h3>三级标题，加下划线</h3>
    <p class="special">段落文本1，加下划线</p>
    <p>段落文本2，普通文本</p>
    <p id="one">段落文本3，加下划线</p>
</body>
</html>

CSS的层叠性和继承性

层叠性

多种CSS样式的叠加。例如当使用内嵌式CSS样式表定义<p>标签字号大小为12像素，使用链入式定义<p>标签颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS层叠加</title>
    <style type="text/css">
        p{
            font-size:12px;
            font-family:"楷体";
        }
        .special{font-size:16px;}
        #one{color:red;}
    </style>
</head>
<body>
    <p class="special" id="one">段落文本</p> /*类选择器的优先级高于标签选择器*/
    <p>段落文本2</p>
    <p>段落文本2</p>
</body>

继承性

书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

例如定义主体元素body的文本颜色为黑色，那么页面中所有的文本都将显示为黑色，这是因为其他标签都嵌套在<body>标签中，是<body>标签的子标签。

p,div,h1,h2,ul,dl,li{color:black;}
可以写为
body{color:black;}

不是所有的CSS属性都可以继承，以下属性不具有继承性：边框属性、内/外边框属性、背景属性、定位属性、布局属性、元素宽高属性。

当为body元素设置字号属性时，标题文本不会采用这个样式，因为标题标签h1~h6有默认字号样式，这时默认字号样式覆盖了继承的字号。

CSS的优先级

p{color:red;} /*标签样式*/
.blue{color:green;} /*class样式*/
#header{color:blue;} /*id样式*/

<p id="header" class="blue">
    蓝色
</p>

/*
    标签选择器的权重：1
    类选择器的权重：10
    id选择器的权重：100
*/

对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器权重的叠加。

p strong{color:black;} /*权重为：1+1*/
strong.blue{color:green;} /*权重为：1+10*/
.father strong{color:yellow} /*权重为：10+1*/
p.father strong{color:orange;} /*权重为：1+10+1*/
#header strong{color:pink;} /*权重为：100+1*/
#header strong.blue{color:red;} /*权重为：100+1+10*/

<p class="father" id="header">
    <strong class="blue">文本的颜色为红色</strong>
</p>

继承样式的权重为0。在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，即子元素定义的样式会覆盖继承来的样式。

strong{color:red;}
#header{color:green;}

<p id="header" class="blue">
    <strong>继承样式不如自己定义</strong> /*红色*/
</p>

权重相同时，CSS遵循就近原则。

CSS定义了一个!important命令，该命令被赋予最大的优先级。

#header{color:red!important;}

hoλ ⺕^o丨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS选择器用法笔记
qq_41131274的博客
06-01 220
CSS选择器用法笔记 CSS选择器用法笔记 1、id选择器 2、class类选择器 3、标签选择器 4、属性选择器 5、伪类 6、组合 1、id选择器 用法： #id名称 示例： #idname 示例说明：选择所有id="idname"的元素 2、class类选择器 用法： .class名称 示例： .classname 示例说明：选择所有class="classname"的元素 3、标签选择器 ...
初识CSS
nanaduolaameng的博客
07-11 267
一.初识css 1.什么是css Cascading Style Sheet：层叠样式表，简称样式表。 作用：实现网页布局，美化网页 2.css的特性 表现层和结构层完全分离，符合web标准 便于团队开发（视觉设计师和内容编辑分离） 便于网站的更新升级，维护性好 用户体验好，网站性能高 能够适应不同的显示设备 二.CSS基本语法 1.引入css的三种方法 （1）行内样式 就是直接在标签的开始标签中，使用style属性，如下： <body>   <h1 style=”color:
前端部分知识点---CSS
m0_58495313的博客
11-01 273
思想：这是一种分层设计的思想，css把和颜色，大小位置等信息剥离到<style>中，而html只用关心提供什么样的内容就行了。 一、语法：selector{property：value}----即选择器{属性：值} 二、选择器：选择器主要分3种：元素选择器，id选择器，类选择器 <style> p{ color:red; } #p1{ color:blue; } </style> <p>没有id的p</p> <p id="
CSS样式优先级怎样划分？【CSS优先级规则】
CZ-001的博客
06-21 985
如果仅仅将基础选择器的权重相加，后代选择器(包含11层div)的权重为11，大于类选择器“.inner”的权重10，文本将添加下画线。而“strong”选择器的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。在嵌套结构中、h不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。应用style属性的元素，其行内样式的权重非常高。此时外链式的id选择器和嵌入式的标签选择器权重不同，“#header”的权重更高，文字将显示为外部样式定义的红色。
Web学习②--CSS
啰啰的博客
06-08 81
CSS是什么 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。 网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。 提示： 在 Internet 早期阶段（CSS大量使用之前），页面的内容和样式都由 HTML 来负责，这是一个相当糟糕的问题。 万维网联盟 W3C（World Wide Web Consorti
CSS选择器
JustinNeil的博客
06-02 187
在CSS中使用选择器来设置特定元素的样式，主要的选择器有： 元素选择器、id选择器、class选择器、分组选择器、嵌套选择器，后代选择器、兄弟选择器、伪类选择器、伪元素选择器，属性选择器 元素选择器 直接以HTML标签作为选择器 <p> This is a paragragh. </p> <style type="text/css"> p{ text-a...
CSS3初识
weixin_48152652的博客
04-07 470
前端三要素：HTML+CSS+JavaScript 如何学习 CSS是什么 CSS怎么用 CSS选择器（重点+难点） 美化网页（文字，阴影，超链接，列表，渐变） 盒子模型 浮动 定位 网页动画（特写） 什么是CSS Cascading Style Sheet(层叠级样式表) 表现（美化网页 字体，颜色，边距，高度，宽度，背景图片，网页定位 如何查看一个网页的CSS？ 浏览器->右击->检查（审查元素）->控制台（control） CSS发展史 CS
HTML-css初识.md
01-06
HTML-css初识.md
初识前端，学习html+css.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
css1.rar_css水调歌头
09-24
在"第04章 初识CSS"中，你可能将学习到这些基本概念，并通过实践案例加深理解。掌握CSS基础知识是构建美观、易用且功能强大的网页的前提，它能让你的HTML页面呈现出丰富多彩的视觉效果。不断学习和实践，你将能够...
01-CSS初识.md
03-18
01-CSS初识.md
权威CSS学习笔记！
laizhenghua的博客
01-27 421
CSS学习 1、CSS简介 1.1、关于CSS CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML 4.0中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通 常存储在CSS文件中 多个样式定义可层叠为一个 1.2、HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如<h1>表明这是一个大标题，<p>表 明这是一个段落, <i
获取＜p class=‘demo‘＞hello JavaScript＜/p＞内部文案
Yao_Huang_的博客
09-25 311
const str = "<p class='demo'>hello JavaScript</p>"; const reg = /^\<.+\>(.+)\<.+\>$/; const str1 = str.replace(reg,function (match, $1) { return $1; }); console.log(str1); 捕获组:匹配x并记住匹配项。例如，/(foo)/匹配并记住“foo bar”中的“foo” 正则表达式...
学习CSS之属性
人生如棋
04-02 1051
一、字体属性1.font-family:字体族常用的属性值有：Arial,Courer,宋体 p.song{          font-family:宋体;        }2.font-size:字体大小常用单位为pt(point,磅),px(pixel,像素),有时也可用xx-small,x-small,medium,large,x-large,xx-large如： p.large{  
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 851
【代码】[css3] 如何设置边框颜色渐变。
CSS3 scale 适配
m0_54007573的博客
07-24 513
CSS3 scale 适配
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1301
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1046
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值