网硕互联帮助中心css基础
css简介
定义：CSS（Cascading Style Sheets）用于定义页面元素样式，基本语法为选择器 + 声明块（），如。使用方式：外链（，推荐，利于维护）；嵌入（标签内写样式）；内联（元素属性，如，不推荐）。选择器：基础选择器（通配选择器匹配所有元素；标签选择器；ID 选择器（唯一）；类选择器（可重复）；属性选择器、；伪类选择器、）；组合选择器（直接组合（同时满足标签和类）；后代组合（article 内所有 p）；亲子组合（article 直接子 p）；选择器组（同时定义多个元素））。
h1{
color：white；
font－size：14px；
}
h1是选择器（selector），表示选择所有的h1标签的内容并定义样式
color、foot－size是属性（property）white、14px是属性值（value） color设置颜色、
属性＋属性值称为一条声明（declaration），多条声明用分号隔开放在同一个花括号里面，这些东西加起来称为一个声明块
在html中使用css有三种方法
推荐使用第一种方法，更加利于代码维护
<!–外链–>
<link rel="stylesheet"href="/assets/style.css">
<!–嵌入–>
<style>li { margin:0; list-style: none; }P { margin: lem 0; }</style>
<!–内联–>
<p style="margin:lem 0">Example Content</p>
例：
<IDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blog</title>
<style>
h1{<!–给h1标签设置字体颜色为橙色 大小为24像素–>
color:orange;
font-size: 24px;
}
p{<!–给p标签设置字体颜色为灰色 大小为24像素行高为1.8–>
color: gray;
font-size: 14px;
line-height:1.8;
}
</style>
</head>
<body>
<h1>Web框架的架构模式探讨</h1>
<p>在写干货之前，我想先探讨两个问题，模式的局限性?模式有什么用?</p>
</body>
</html>
css的工作模式
推荐使用的代码风格
基础选择器
选择器selector
找出页面中的元素，以便给他们设置样式
使用多种方式选择元素 按照标签名、类名或id
按照属性
按照DOM树中的位置
通配选择器＊
在<style>中写入＊声明块会匹配到所有标签
标签选择器
通过标签名来选择元素，在声明块前需要写入想要匹配的标签名
id选择器
通过id名选择元素，在声明块前写入＃id名选中元素，在整个页面中id名需要有唯一性
类选择器
通过class属性来选择元素，在声明块前写入.class名来选中元素，class值可以重复，一般需要相同样式的标签会起相同的class名，然后通过类选择器来定义样式
属性选择器
在声明块前写入标签名[属性]来选择元素，有两种写法，可以只写入属性名，也可以把属性名和属性值一起写入选择更加准确
字符选择器
通过限定某一个属性值字符的开头或结尾来选择元素
标签名[属性名^＝"开头字符"]
标签名[属性名$＝"结尾字符"]
写在声明块之前
伪类（pseudo－classes）选择器
不基于标签和属性定位元素
两种伪类
动态伪类
结构性伪类
动态伪类
a：link
一个正常的链接的样式
a：visited
一个访问过的链接的样式
a：hover
表示鼠标放在链接上时的样式
a：active
表示链接被鼠标点击时的样式
：focus
表示鼠标点击输入框后，正处于输入中的状态时的样式
结构性伪类
通过元素在DOM树中所处的位置来选中
li：first－child
表示选择在列表中排行第一个的元素
li：last－child
表示选择在列表中排行最后一个的元素
组合器combinators
把基础选择器中的几种选择方式组合起来组成更复杂的组合选择器
如：
input.error{
border－color：red；
}
表示选择一个input类型并且某属性值＝error的元素，要同时满足两个条件
例：
<article>
<h1>拉森火山国家公园</h1>
<p>拉森火山国家公园是位于…</p>
<section>
<h2>气候</h2>
<p>因为拉森火山国家公园…</P>
</section>
</article>
<style>
article p {<!–中间有空格 表示一个后代选择器–>
color:coral;
}
article > p {<!–中间有 > 表示一个亲子选择器–>
color: limegreen;
}
article section h2 {<!–三重后代选择器–>
border-bottom: lpx dashed #999;
}
</style>
选择器组
对于拥有相同规则的选择器可以合成一个选择器组 中间用，隔开
如图就是同时定义了body h1 h2 h3 h4 h5 h6 ul ol li十个标签的样式
设置字体
字体 font－family
代码中应该设置多个字体，用户的设备上可能没有字体，多设置几个会选择用户有的字体来显示
serif不是一个特定的字体 而是一个通用字体族，浏览器可以选择字体族中的字体来展示
通用字体族
css中有五种通用字体族
serif：衬线体（georgia、宋体）线条末端有装饰
sans－serif：无衬线体（arial、黑体、微软雅黑）线条比较简单 粗细一致 无装饰
cursive：手写体（caftisch、楷体）模仿人手写
fantasy：签名字体（comic sans ms）比较夸张 具有设计感
monospace：等宽字体（consolas、中文字体）每一个字符宽度都是一样的
font－family使用建议
在字体列表的最后一定要加上通用字体族，确保字体一定能展示出来
如果想要英文和中文使用不同的字体就要把英文字体放在中文字体的前面 因为中文字体一般包含英文字符
使用web fonts
当想使用一些用户没有的字体时可以使用web字体 web字体就是通过网络来下载一些字体在浏览器中显示
首先通过＠font-face来声明一个web fonts
在声明中用font－family指定web字体的名字
用src指定字体文件的URL和格式 可以指定多种格式的字体文件 因为不同的浏览器支持的格式不一样
因为声明的时候指定了字体的名字 在使用时通过名字直接使用就可以
例：
<h1>Web fonts are awesome!</hl>
<p>Web fonts area CSS feature…</p>
<style>
@font-face {
font-family: 'Megrim';
src:url('/megrim.woff2') format('woff2'),
url('/megrim.ttf') format('truetype');
}
@font-face {
font-family: 'Buda';
src:url('/buda.woff2') format('woff2')
url('/buda.ttf') format('truetype');
}
h1{
font-family: Megrim, Cursive;
font-size: 40px;
}
font－size
通过font－size属性指定字体的大小，有三种方式
例：
<section>
<h2>A web font example</h2>
<p class="note">Notes: Web fonts …</p>
<p>with this in mind, let's build…</p>
</section>
<style>
section {
font-size:20px;
}
section h1 {
font-size: 2em;<!–2em表示是父级元素字体大小的两倍–>
}
section .note {<!–声明块前加.note 设置为80％ 表示是父级元素大小的80％–>
font-size:80%;
color:orange;
}
</style>
font－style
在声明块中通过font－style属性可以设置字体是否为斜体 默认值为normal正常显示 设置值为italic显示斜体
font－weight
在声明块中通过font－weight属性可以设置字体的粗细 css中支持设置粗细从100到900 normal相当于400字重 bold相当于700字重 并不是所有字体都支持100到900 大部分只支持normal和bold两种
line－height
在声明块中通过line－height属性可以设置行间距 有两种设置方式
font
前面几种和字体相关的属性可以使用font属性一起设置
需要按照斜体 粗细 大小／行高 字体族的顺序来设置
例：
h1{
/*斜体 粗细 大小／行高 字体族 ＊／
font：bold 14ps／1.7 Heivetica,sans-serif;
}
p{
font：14px serif；
}
2026年1月21日 22：42
学的感觉好混乱HTML中明明能用<i>标签让字体变成斜体为什么css里还要搞出来一个font-style 属性来@_@
评论前必须登录！
注册