CSS3关于排版与文本样式标签基础知识速查

数次拒绝刘亦菲

已于 2022-11-29 10:23:21 修改

阅读量1k

点赞数

分类专栏： CSS样式基础文章标签： css3 css html

于 2022-01-31 11:39:55 首次发布

本文链接：https://blog.csdn.net/m0_62951223/article/details/122758676

版权

CSS样式基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS描述了网页布局

引入CSS样式表

行内式 (在body标签内)（初学者常用）

<标记名 style=“属性值1:属性值;… ;属性值n：属性值”>内容</标记名>

缺点:只能在某标签中使用一次，样式规则少

2.内嵌式(在head标签内)（初学者常用）

< head>

< style type=“text/css”>

选择器{ 属性1：属性值1；…；属性n：属性值n}

< /style>

< /head>

缺点：若网站只有一个页面，比较好用，否则不能发挥CSS重用的优势

3.链入式（开发常用）(在head标签内)

< head>

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

< /head>

优点：一个CSS样式可被若干个HTML页面使用，一个页面可以使用若干个CSS样式表

CSS基础选择器

选择器概念：

要想将CSS样式应用于特定的HTML元素，首先要找到该目标元素执行这一任务的样式规则部分称为选择器

标记选择器

标记名{属性n：属性值n；}

HTML所有标签都适用

优点：快速为页面中所有同类型的标记统一样式

缺点：无法差异化样式
类选择器

.类名{属性n：属性值n；}

类名为HTML元素的class属性值，大多数HTML元素都可以定义class属性

优点：可以为元素对象定义单独或者相同的样式
```
<head>
    <style type="text/css">
        .green{color:green;}
    </style>
    <body>
        <p class="green">文本</p>
    </body>
</head>
```
(“文本” 为绿色字体)

提示：p中可以放入若干个class属性

id选择器

<head>
    <style type="text/css">
        #+id名{属性n：属性值n；}
    </style>
    <body>
        <标签 id="id名">文本</标签>
    </body>
</head>

通配选择器

作用到所有HTML标记，降低代码的执行速度，作用范围最广，但开发不常用

*{属性：属性值；}
标签指定式选择器

由两个选择器构成，第一个为标记选择器，第二个为class/id选择器
后代选择器

元素1 元素2{样式声明}

理解：选择元素1中的所有的元素2，修改元素1标签中的元素2标签(元素2可以嵌套别的标签)

<head>
    <style type="text/css">
        p  strong{color:red;}
        strong{color:blue;}
    </style>
    <body>
        <p>文本<strong>文本</strong></p>    <!--显示红色-->

        <strong> 文本 </strong>  	         <!--显示蓝色-->
    </body>
</head>

并集选择器 (重要)

(各个选择器通过逗号连接而成的集体声明)

如

<head>
    <style type="text/css">
        h2,h3,p{color: red;font-size: 14px;}
        h3,special,#one{text-decoration: underline;}
    </style>
    <body>
        <p class="special">段落文本1加下划线</p>
        <p id="one">段落文本2加下划线</p>
    </body>
</head>

文本样式属性

字号大小

font-size：字号大小； (可用相对/绝对长度单位)

相对长度单位	说明
em	相对于当前对象内文本的字体尺寸
px	像素

绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

字体

常用字体有：宋体，微软雅黑，黑体

font-family：字体；

特别的：1.各种字体之间需要用英文逗号隔开

2.中文字体需加英文引号，英文字体不用加，当要设置英文字体时，英文字体需在中文字体之前

例如

选择器{
            font-family:Arial,"宋体"，"黑体"; 
        }

（用户若没有安装Arial，则会选择宋体，若无则黑体）

3.若字体名中包含空格，#，￥等符号，该字体需加英文引号

4.系统有默认字体

字体粗细

font-weight：字体粗细；

属性值	说明
normal	默认值
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900(100的整数倍)	定义由细到粗的字符（400=normal，700=bold）

### 字体风格

normal：默认值

italic：斜体 (有倾斜属性则会倾斜)

oblique：倾斜 (有无倾斜属性都会倾斜)

综合设置字体样式

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

如

选择器{
           font: italic small-caps bold 30px/40px Arial ; 
        }

选择器{
            font-style:italic;
            font-variant: small-caps;
            font-weight :bold;
            font-size:30px;
            line-height: 40px;
            font-family: Arial ;
        }

二者等价

定义服务器字体

通过该属性开发者可以在用户计算机未安装字体时使用任何喜欢的字体

@font-face{
            font-family: 字体名称;
            src:字体路径；
        }

自动换行

用于实现长单词和url地址的自动换行

选择器{word-wrap: 属性值;}

属性值	说明
normal	只在允许的断字点换行(默认)
break-word	在长单词或者url地址内部换行

解释：如果框内一行溢出了，可以用break-word 进行换行

颜色

color:文本颜色;

用于定义文本颜色

单词	red，green
十六进制	`#FF0000`
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

推荐好用的软件：FastStone

可以用于找到颜色，测量像素

字/字母间距

letter-spacing:间距值;

允许用负值(重叠)

单词间距

word-spaceing：间距值

行间距

line-height:间距值

间距常用属性值：像素px，相对值em，百分比%

字符大小写转换

text-transform:属性值

none	不转换
capitalize	首字母大写
uppercase	全部字符转换为大写
lowercase	全部字符转换为小写

文本装饰

text-decoration:属性值

none	默认
underline	下划线
overline	上划线
line-through	删除线

对齐方式

text-align:属性值

center	居中对齐
right	右对齐
left	左对齐

首行缩进

text-indent:属性值

属性值为px或者em

(适用于块级元素，对行内元素无效)

空白符处理

white-space:属性值

normal	默认
pre	预格式化，按文档的书写格式保留空格、空行原样显示
nowrap	空格空行无效，强制文本不能换行，除非遇到换行标记内容超出元素的边界也不能换行，若超出浏览器页面则会自动增加滚动条

阴影效果

text-shadow:属性值

选择器{text-shadow:h-shadow v-shadow blur color;}

h-shadow	水平,阴影距离(可为负值，em/px，必需)
v-shadow	垂直阴影距离(可为负值，em/px，必需)
blur	模糊半径(em/px，可选)
color	阴影颜色(可选)

如:text-shadow:2px 3px 3px red;

(当h-shadow，v-shadow为负值时改变阴影的投射方向)

同时如果想设置一个花里胡哨的叠加阴影可以这样

设置多组阴影参数

如：text-shadow:2px 3px 3px red,2px 3px 3px green;

这样的话，红色和绿色阴影叠加

标示对象内溢出文本

选择器:{text-overflow:属性值}

clip	修剪溢出文本，不显示省略标记
ellipsls	用省略标记“…”表示被修剪的文本

CSS的一些性质

选择器优先级

选择器	权重
标记选择器	1
类选择器	10
id选择器	100
继承样式	0

(CSS自定义了一个 !important命令赋予其最大优先级)

CSS的层叠性

多个CSS样式可以叠加

如：<p class="special1"id="special2">文本内容</p>

CSS的继承性

继承性是指被包在内部的标签将拥有外部标签的样式性，即子元素(后代亦可)可以继承父元素的属性

如：p,div,h1,h2,h3,h4,ul,ol,dl{color: black;}

可以写成：body{color:black;}

但是并不是所有的样式都可以被继承

a标签的字体颜色、下划线不能被继承

<a href="http://baidu.com">超链接</a>
<a href="#">回到最顶端</a>
<a href="css">文件链接</a>

h标签的文字大小不能被继承

h标签分为 h1-h6

此外还有：边框、外/内边距、背景、定义、布局、元素宽/高，这些属性不具备继承性

数次拒绝刘亦菲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3关于排版与文本样式标签基础知识速查

CSS描述了网页布局引入CSS样式表行内式 (在body标签内)（初学者常用）<标记名 style=“属性值1:属性值;… ;属性值n：属性值”>内容</标记名>缺点:只能在某标签中使用一次，样式规则少2.内嵌式(在head标签内)（初学者常用）< head> < style type=“text/css”> 选择器{ 属性1：属性值1；…；属性n：属性值n} < /style>< /head>缺点：若
复制链接

扫一扫