本文主要是介绍CSS的基本使用 选择器 文本属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
CSS的基本使用 选择器
一、css选择器
- css(Cascading style sheets)层叠样式表
- 用来美化网页
1.1 三种引入方式
(1)标签内部: 在标签上添加style属性,在style属性里面添加css样式
<body><div style="color:blue;font-size: 30px;">成都</div>
</body>
特点:不需要选择器。样式的作用范围只有当前的标签,大量使用行内样式会产生代码冗余,会使结构不清晰。
(2)内嵌 : 在head标签里面添加style标签 ,在style标签内部写入css语法
<head><style type="text/css"><!-- style标签中写css代码 -->div{
/*此时的div为普通标签,在这设置了相应的样式,则在body标签中只要使用了div标签的都会呈现该样式*/width:100px;height:100px;color:blue;font-size: 80px;}</style>
</head>
<body><div>成都</div>
</body>
(3)外链 : 在head标签里添加link标签 ,通过href属性引入 .css文件 ,把样式写在css文件中
<head><link rel="stylesheet" href="1.css">
</head>
注释:
1)外部css文件(***.css文件)
2)使用格式:<link href=“css文件位置”rel=“stylesheet” />
3)属性
rel 属性 – 定义了文档与链接的关系。
stylesheet – 一个外部加载的样式表
1.2 标签选择器
1.2.1.基本语法
形如:选择器{样式声明;样式声明;样式声明;}例如:
使用标签编写的标签选择器的样式:p{width: 200px;height: 50px;background-color: lightblue;}div{width: 200px;height: 50px;background-color: lightblue;}
说明:
①选择器:用来找到需要添加样式的标签的一些符号
②样式声明: 每一组样式声明都需要一个分号结尾,每一组声明由 属性名:值 组成
1.2.2 例题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size: 50px;font-family: 楷体;}</style>
</head>
<body><p>成都</p>
</body>
</html>
效果:
1.3 类选择器 class
1.3.1 基本语法
在头标签内进行编辑,或者在css文件中进行编写:.box{width:100px;height:100px;}.red{background-color:red;}
在body标签中使用class=""进行内嵌:<div class="box red"> </div><div class="box"> </div><p class="box red"></p>
- class属性的命名规范
- 可以包含数字、字母、下划线_、连字符-
- 不能以数字开头
- 多个标签可以使用相同的类名
- 每一个标签都可以设置多个类名,多个类名以词列表的形式定义 class=“box red …”
1.3.2 例题
HTML文件:1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="NO1.css">
</head>
<body><p>成都</p>
</body>
</html>
CSS文件:NO1.css
p{font-weight: 100;font-size:50px;font-family: 楷体;color: brown;
}
效果:
1.4 id选择器 #{ }
id选择器,顾名思义就像我们每个人的身份证一样唯一,所以在一整个HTML页面一个id选择器只能让使用一次。如果使用多次不会提示错误,但是违背了设计这个选择器的初衷,所以,一般id选择器使用较少,一般使用类选择器或者标签选择器。
1.4.1 规则
id属性命名规则:
- 可以包含数字、字母、下划线、连字符
- 不能以数字开头
- id具有唯一性,一个id名称只能使用一次
- 一个标签只能有一个id名称
1.4.2 使用
<body> <p id="id_L1"> 成都(使用id选择器)</p>
</body>
效果:
1.5 优先级
html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="NO1.css">
</head>
<body>优先级比较<p>成都(使用标签选择器)</p><p class="class_L1">成都(使用class选择器)</p><p id="id_L1"> 成都(使用id选择器)</p><p id="id_L1" class="class_L1" >成都(同时使用三种选择器)</p>
</body>
</html>
css文件:
p{font-size:20px;font-family: 楷体;color: brown;
}
#id_L1{color:rgb(54, 207, 24); font-size:40px;font-family:隶书;
}
.class_L1{font-family: 黑体;font-size:30px;color: darkblue;
}
效果:
结论:
优先级从高到低依次是:id选择器 >
class选择器>
标签选择器
二、 属性
知识点:
长度单位
- px 像素
- em 当前标签的字体大小
- % 百分比
- rem root(根)html标签的font-size
2.1.字体属性 font
2.1.1 字号 font-size
属性值 | 说明 |
---|---|
xx- small | 绝对字体尺寸,根据对象字体进行调整,z最小 |
x- small | 绝对字体尺寸,根据对象字体进行调整,较小 |
small | 绝对字体尺寸,根据对象字体进行调整,小 |
medium | 默认值。绝对字体尺寸,根据对象字体进行调整,正常 |
large | 绝对字体尺寸,根据对象字体进行调整,大 |
x-large | 绝对字体尺寸,根据对象字体进行调整,较大 |
xx-large | 绝对字体尺寸,根据对象字体进行调整,最大 |
larger | 相对字体尺寸,根据父元素中字体的尺寸进行相对增大,使用成比例的em单位 |
smaller | 相对字体尺寸,根据父元素中字体的尺寸进行相对缩小,使用成比例的em单位 |
length | 百分数或由浮点数和单位标识符组成的长度值,不可为负值,其百分比取值基于父元素中字体的尺寸 |
inherit | 继承父元素字体的大小 |
除了使用属性值以外,还可以直接通过数值定义大小,比如
div{ font-size:20px; }
2.1.2 字体 font-family
fon-famil属性用于指定文字的字体类型,例如宋体、黑体、微软雅黑等,即在网页中展示字体不同的形状。因为字体需要浏览器内嵌字体的支持,该属性可以设置多个显示字体,浏览器按照属性值指定的多个字体依次搜索,以优先找到的字体来显示文字。多个属性值之间以英文逗号隔开。
例如:
font-family: "宋体";
font-family: "微软雅黑";
font-family: "Microsoft YaHei";
<!-- 设置多个字体,浏览器会识别第一个支持的字体 -->
例如:
html文件:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="NO1.css">
</head>
<body> <p> 成都</p><div>成都</div>
</body>
</html>
css文件:
p{font-size:20px;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif,黑体;color: brown;
}
div{font-family:黑体 ;
}
效果:
2.1.3 字体风格 font-style
属性值 | 说明 |
---|---|
normal | 默认值。标准字体 |
italic | 斜体 |
oblique | 倾斜字体 |
inherit | 规定从父元素继承字体样式 |
unset | 不设置 |
initial | 规定从父元素继承字体样式 |
例如:
HTML文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="NO1.css">
</head>
<body> <p class="unset">春晓</p><p class="italic">春眠不觉晓</p> <!--斜体--><p class="oblique">处处闻啼鸟</p> <!--倾斜字体--><p class="inherit">夜来风雨声</p> <!--继承父类字体--><p class="initial">花落知多少</p> <!--继承父类字体--></body>
</html>
CSS文件
p{font-size:20px;color: brown;
}
.italic{font-style: italic;
}
.oblique{font-style: oblique;
}
.inherit{font-style: inherit;}
.initial{font-style: initial;
}
.unset{font-style: unset;
}
效果:
2.1.4 加粗字体 font-weight
属性值 | 说明 |
---|---|
normal | 默认值。定义标准的字符 |
bold | 定义粗体字符 |
bolder | 更粗字体 |
lighter | 更细字符 |
整百数值 | 100-900共九个数值,400等价于normal,700等价于bold |
inherit | 规定从父元素继承字体的粗细 |
例如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-weight: 900;<!--设置字体粗细-->}</style>
</head><body>世界上最甘甜的水<p>是你流下的汗水</p>
</body></html>
效果:
2.1.5 字体颜色 color
例如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-weight: 900;color: red;}</style>
</head><body>世界上最甘甜的水<p>是你流下的汗水</p>
</body></html>
效果:
2.2 文本属性 text
2.2.1 阴影文本 text-shadow
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 40px;font-weight: 900;color: red;text-shadow: 10px 12px black;}</style>
</head><body><p>你流下的汗水</p>
</body></html>
图解:
效果:
再比如:
效果:
2.2.2 文字修饰 text- decoration
属性值 | 说明 |
---|---|
none | 默认值 |
underline | 定义文本的下划线 |
blink | 定义闪烁文本 |
overline | 定义文本的上划线 |
line-through | 定义文本的删除线 |
inherit | 规定文本继承父元素的属性值 |
例如:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 40px;font-weight: 900;color: red;text-decoration: line-through;text-decoration-color: black;}</style>
</head><body><p>天道酬勤</p>
</body></html>
效果:
2.2.3 文本对齐方式
属性值 | 说明 |
---|---|
iR | 定义文本居中对齐 |
center | 定义文本靠左对齐 |
eft | 定义文本靠右对齐 |
right | 定义文本两端对齐 |
justify | 继承父元素的属性值 |
inherit | 最后一行在行开头对齐 |
start | 最后一行在行末尾对齐 |
2.2.4 垂直对齐方式 vertical-align
在网页文本编辑中,不仅需要水平对齐,有时还要求文字垂直对齐,即文字顶机对齐或底部对齐。在CSS中 ,t使用ial-align属性 来定义行内元索的基线相对于该元素所在行的基线垂直对齐。允许指定负长度值和百分比值使元素在垂直方向上发生变化。而在表格中,这个属性可以设置单元格内容的对齐方式。vertical- align的属性值如表所示。
属性值 | 说明 |
---|---|
baseline | 默认,定义元素放到父元素的基线上 |
sub | 定义元素垂直对齐文本的下标 |
super | 定义元素垂直对齐文本的上标 |
top | 定义元素的顶端与行中最高元素的顶端对齐 |
text-top | 定义元素的顶端与父元素字体的顶端对齐 |
middle | 定义该元素在父元素的中部 |
bottom | 把元素的底部与行中最低的元素的底部对齐 |
text-bottom | 元素的底部与父元素的底部对齐 |
length | 定义元素在行中的固定值 |
% | 可以使用百分比定义元素在行中的位置 |
inherit | 继承父元素的属性值 |
2.2.5 文本缩进 text indent
段落首行缩进两个字符表示个段落的开始,在网页文本编辑中可以通过属性来设定文本块的首行维进。text-indent的属性值如表所示,该属性对FHTML的任何标记都能让首行以给定的长度或百分比缩进。
属性值 | 说明 |
---|---|
length | 定义固定的缩进,默认值为0,单位为em或px |
% | 定义基于父元素宽度的百分比的缩进 |
inherit | 规定从父元素继承text-indent属性的值 |
2.2.6 文本行高 line- height
在CSS中,可用line height属性设置行间距。line- height的属性值如表所示。
属性值 | 说明 |
---|---|
normal | 默认值 |
number | 设置具体数字,数字和当前字体尺寸相乘的积为间距的值 |
length | 设置固定的行间距 |
% | 根据当前字体尺寸的百分比来设置行间距 |
inherit | 继承父元素的属性值 |
这篇关于CSS的基本使用 选择器 文本属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!