🔎这里是【前端网页】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML,一起学习一起进步。
👀本期介绍
本期主要介绍CSS样式表入门概述以及基本语法格式和选择器
文章目录
1.CSS 概述
1.1什么是 CSS
1.1入门案例
2. CSS 基本语法格式
3. 选择器
3.1 标签选择器
3.2 类选择器
3.3 ID 选择器
3.4 扩展:通配符选择器
3.5 扩展:属性选择器
1.CSS 概述
1.1什么是 CSS
CSS (Cascading Style Sheets)
:层叠样式表
层叠:一层一层叠加
样式表:存储样式的地方,多个样式
CSS
通常称为
CSS
样式或层叠样式表,主要用于设置
HTML
页面中的文本内容(字
体、大小、对其方式等)、图片的外形(高宽、边框样式、边距等)以及版面的布局等外
观显示样式。
CSS
可以使
HTML
页面更好看,
CSS
色系的搭配可以让用户更舒服,
CSS+DIV
布
局更佳灵活,更容易绘制出用户需要的结构。
CSS 作用:修饰 HTML 页面,更丰富多彩地展示超文本信息
1.1入门案例
步骤
1
:创建一个
HTML
文件
步骤
2
:在
HTML
上创建一个标签
步骤
3
:标签中新增一个
style
属性,并修改
style
属性值
效果:
因为
HTML
属性在单独使用时有一定的局限性,所以要配合
CSS
样式代码才可以展示更为丰富的
效果。
2. CSS 基本语法格式
放置规范:
在
标签内容体中书写
css
样式代码。
标签放置在
标签之中。
格式规范:
选择器名称
{
属性名
1
:属性值
1
;属性名
2
:属性值
2
;……
.}
选择器:即指定
CSS
样式作用在哪些
HTML
标签上
代码规范:
属性名和属性值之间是键值对关系;
属性名和属性值之间 用 “:”
连接,最后“
;
”结尾;
例如:
font-size:120px;
如果一个属性名有多个值,多个值之间用 空格 隔开。
例如:
border
:5px solid red;
CSS
注释:
/*
注释内容
*/
等同于
java
的多行注释
示例:
效果:
3. 选择器
3.1 标签选择器
标签选择器:即以
HTML
标签名作为选择器名称。
作用:选择
CSS
样式代码 作用于 对应标签名的标签上。
格式:
标签名
{
/*CSS
样式代码
*/
}
适用范围:适用于将相同样式
作用在多个同名标签上
准备代码:
<span>我是 span111111111111span>
<span>我是 span222222222222span>
<span>我是 div111111111111span>
<span>我是 div222222222222span>
示例:
效果:
3.2 类选择器
每个
HTML
标签都有一个
class
属性,
class
属性值即为类名
类选择器:即以
HTML
的类名(
class
属性值)作为选择器名称。
作用:选择
CSS
样式代码 作用于 对应类名的
HTML
标签上
格式:
.
类名
{
/*CSS 样式代码
*/
}
适用范围:适用于将样式 一次作用在相同类名的标签上。(即使标签名不同)
准备代码:
<span class="redF">span2:我是红色span>
<div class="redF">div2:我是红色div>
示例:
效果:
注意:
1
、如果需要选择多个,例如同时使用
c1
和
c2
多个样式:
2
、类选择器命名时,词组之间可以通过中横线来分隔:
例如:
main-top
main-middle
main-bottom
3.3 ID 选择器
每个
HTML
标签都有一个
id
属性,
id
的属性值必须在本页面是唯一的。
id
选择器:即以
HTML
的
id
(
id
属性值)作为选择器名称。
作用:选择
CSS
样式代码 作用于 某个规定
id
值的
html
标签上
格式:
#id
值
{
/*CSS
样式代码
*/
}
适用范围:适用于将样式 作用某个标签上。(更有针对性)
注意:
必须人工保证
ID
值在本页面唯一。
准备代码:
<div id="d1">div2:我是红色div>
<div id="d2">div2:我是红色div>
示例:
效果:
注意:
class
属性是为了美工 通过类选择器 调整页面样式
id
属性更多是为了程序员 通过
JS
操作页面
3.4 扩展:通配符选择器
CSS 支持使用 * 作为通配符,表示任意元素
上述案例中,因为使用
*
代表任意元素,这里
和
两个标签都被修改了样式。
注意:不建议使用,会降低页面加载速度。
3.5 扩展:属性选择器
每个标签将来都会设置不同的属性及属性值,
我们可以通过标签的属性及属性值来将样式作用于特点标签上。
格式:
标签名
[
属性名
=’
属性值
’]
{
/*css
样式代码
*/
}
准备代码:
<font size="3">黑色字体 1111font>
<font size="5">黑色字体 2222font>
示例:
效果: