目录
一、css的语法规范
二、css的基础选择器
(一)基础选择器总结
(二)标签选择器
(三)类选择器
(四)id选择器
(五)通配符选择器
三、CSS字体属性
(一)字体属性总结
(二)font-family设置字体
(三)font-size设置字号(字体大小)
(四)font-weight设置字体的粗细
(五)font-style设置文字样式
(六)字体属性复合写法
四、CSS文本属性
(一)文本属性总结
(二)color定义文本的颜色
(三)text-align文本内容的水平对齐方式
(四)text-decoration装饰文本
(五)text-indent设置首行文本的缩进
(六)line-height设置行间距
五、css的引入方式
(一)内部样式表(嵌入式)
(二)行内样式表(行内式)
(三)外部样式表(链接式)
一、css的语法规范
选择器是用于指定css样式的HTML标签,花括号里面是对于该对象设置的具体样式属性和值之间采用“键值对”形式出现,用“:”隔开声明之间用“;”隔开123二、css的基础选择器
(一)基础选择器总结
(二)标签选择器
用HTML的标签名作为选择器,按照标签名称分类,为页面某一类标签指定统一的css样式。
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color: red;}</style></head><body><p>我真美</p><p>我真帅</p><div>我真白</div></body></html>
(三)类选择器
单独选择一个或几个标签。样式点(.)定义,结构类(class)调用,一个或多个,开发最常用
类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)长名称或词组可以使用中横线来为选择器命名。不要纯数字、中文、标签名等命名, 尽量使用英文字母来表示。多类名选择器:各个类名中间用空格隔开。<div class="red font20">林晓</div>.类名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<pclass=“类名”></p>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {color: red;}</style></head><body><ul><li class="red">倩女幽魂</li><li class="red">倚天屠龙记</li><li>天龙八部</li><li>康熙王朝</li></ul><div class="red">这都是我喜欢的书</div></body></html>
类命名规则:
头:header 内容:content/container尾:footer导航:nav 侧栏:sidebar 栏目:column
页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar
标志:logo 广告:banner页面主体:main热点:hot 新闻:news 下载:download
子导航:subnav菜单:menu 子菜单:submenu搜索:search 友情链接:friendlink
页脚:footer 版权:copyright 滚动:scroll 内容:content 标签页:tab 文章列表:list
提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service
注册:regsiter 状态:status 投票:vote 合作伙伴:partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer
导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper
左右中:left right center
(2)导航
导航:nav 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar
左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu
标题: title 摘要: summary
(3)功能
标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索:search
功能区:shop 标题:title加入:joinus 状态:status 按钮:btn 滚动:scroll
标签页:tab 文章列表:list 提示信息:msg 当前的: current 小技巧:tips 图标: icon
注释:note 指南:guild 服务:service 热点:hot 新闻:news 下载:download
投票:vote 合作伙伴:partner 友情链接:link 版权:copyright\
(四)id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式;样式#定义,结构id调用。只能调用一次,别人切勿使用
#id名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<pid="id名"></p>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#pink {color: pink;}</style></head><body><div id="pink">刘德华</div></body></html>
(五)通配符选择器
通配符使用*
定义,它表示选取页面中所有元素(标签)。
* {
属性1:属性值1;
....
}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style></head><body><div">刘德华</div><div>张曼玉</div><div>黎明</div><h1>这些都是大明星</h1></body></html>
三、CSS字体属性
(一)字体属性总结
(二)font-family设置字体
各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号电脑会从默认以第一个字体显示,如果没有则往下走div {
font-family: Arial,"Microsoft Yahe","微软雅黑";
}
(三)font-size设置字号(字体大小)
p {
font-size: 20px;
}
谷歌浏览器
默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小(标题标签单独设置大小)
(四)font-weight设置字体的粗细
更喜欢用数字表示粗细p {
font-weight: normal | bold | bolder | lighter |number;
}
(五)font-style设置文字样式
平时我们很少给文字加斜体,反而要给斜体标签( em , i )改为不倾斜字体p {
font-style: normal;
}
(六)字体属性复合写法
<style>/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */div {法1:font-style: italic;font-weight: 700;font-size: 16px;font-family: 'Microsoft yahei';/法2:/* 复合属性:简写的方式 节约代码*//* 顺序:font-style font-weight font-size/line-height font-family */font: italic 700 16px 'Microsoft yahei';}</style>
使用font属性时,必须按照文字样式 文字粗细 文字大小 文字字体的顺序书写,不能更换顺序,并且各个属性间以空格隔开不需要设置的属性可以省略(取默认值),但必须保留font-size
和font-family
属性,否则 font 属性将不起作用
四、CSS文本属性
(一)文本属性总结
(二)color定义文本的颜色
实际工作中,用16进制的写法是最多的<style>
div {
/* color: red; */
/* color: #ff0000; */
color: rgb(255, 0, 0);
}
</style>
(三)text-align文本内容的水平对齐方式
相当于html<tabel>中的align对齐属性(表格对齐)。
div {
text-align:center;
}
(四)text-decoration装饰文本
可以给文本添加下划线,删除线,上划线等
div {
text-decoration: underline;
}
重点:记住如何添加下划线,如何删除下划线,其余了解即可。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{text-decoration: none;}</style></head><body><a href="#">百度一下</a></body></html>
(五)text-indent设置首行文本的缩进
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值
em是一个相对单位,就是当前元素(font-size)1个文字的大小
如果当前元素没有设置大小,则会按照父元素的一个文字大小
(六)line-height设置行间距
line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px
一般情况下,行距比字号大7--8像素左右就可以了。
p {
line-height: 26px;
}
行高 = 上间距+ 文本高度 + 下间距。上间距和下间距总是相等的,因此文字看上去是垂直居中的。可以通过FSCcapture进行测量。
行高与高度的三种关系
如果 行高 等 高度 文字会 垂直居中
如果行高 大于 高度 文字会 偏下
如果行高小于高度 文字会 偏上
/*line-height 要设置在font属性下面,否则无效,例如:*/height:80px;text-align:center;font:normalbold30px"宋体";line-height:80px;
可以使用display:flex;布局方式让文字水平垂直居中
display:flex;align-items:center;/*侧轴对齐方式*/justify-content:center;/*主轴对齐方式*/
五、css的引入方式
(一)内部样式表(嵌入式)
也称为内嵌式,将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义。
style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
缺点:没有彻底分离结构与样式
<head><style type="text/CSS">选择器(选择的标签) { 属性1: 属性值1;属性2: 属性值2; 属性3: 属性值3;}</style></head>
(二)行内样式表(行内式)
通过标签的style属性来设置元素的样式
style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余。
缺点:没有实现样式和结构相分离。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>例如:<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
(三)外部样式表(链接式)
新建一个或多个以.css为扩展名的外部样式表文件,将所有的样式放在其中通过link标签将外部样式表文件链接到HTML文档中<linkrel="stylesheet"href="css文件路径">index.css文件:div{color:red; font-size:20px;}
<link rel="stylesheet" href="index.css">
rel
:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
href
:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。