目标
使用css基础选择器
设置字体样式
设置文本样式
三种引入方式
使用谷歌调试样式
作用
美化网页 布局页面
html只关注内容的语义 缺点:繁琐
由html专注做结构呈现 样式交给css
网页的美容师
name :css 样式表
标记语言
美化html
语法规范
选择器 和 声明的样式
在/head前面<style></style>
h1{color :red;}
font-size:12px;
选择器是html标签
键值对:属性:属性值;
代码风格
符合实际开发书写方式
样式格式
1.紧凑格式
2.展开格式(better)
样式大小写
小写
空格规范
冒号后面写空格
选择器和大括号之间保留空格
基础选择器
作用
选择器(选择符) 选择标签
选择器分类
基础选择器
由单个选择器组成
标签选择器
语法:
标签名 {
属性一:属性值1;
属性二:属性值2;
…
}
一类标签全部选出来
优点:快速
缺点:不能差异化设置
类选择器
语法
.类名{
属性1:属性值1;
···
}
·red{
color: red;
}结构需要用class属性来调用class类的意思
<div class='red'>变红色 </div>
口诀
样式点(.)定义
结构类(class)调用
一个或多个
开发最常用
注意:不能是点+标签名
长名词可以用-来分割
不要使用纯数字,中文命名
常用命名规范
多类名
给一个标签指定多个类名
各个类名中间用空格隔开
id选择器
语法
#id名 {
属性1:属性值1;
···
}
口诀:
样式#定义,结构id调用,只能调用一次,别人切勿选用
区别
id选择器和类选择器(class)区别:
!!使用次数
class 类比于名字 可以有多个
id好比身份证号码 不会重复
通配符选择器
语法
*
所有的标签全部修改
总结
标签选择器 不能差异化选择
类选择器. 根据需求选择
id选择器# 一次选一个 只能出现一次 和js搭配使用
通配符选择器* 选择所有标签 特殊情况使用
复合选择器
后代选择器
符号是空格
子代选择器
符号是>
并集选择器
符号是,
链接伪类选择器
a{}
a:hover
:focus选择器
input:focus
选择获得的光标
字体属性
font-family字体系列
font-family
各字体之间用英文状态下的逗号隔开
有空格隔开的多个单词组成的字体加引号
font-size字体大小
font-size
p {
font-size:20px;
}
px是像素
标题标签特殊,单独指定文字大小
font-weight字体粗细
font-weight
bold bolder lighter number normal 正常
数字后面不加单位
font-style文字样式
font-style
normal
italic
<em><i>倾斜标签
字体复合属性
综合来写 节约代码
body {
font: font-style font-weight font-size/line-height font-family
}
eg:
div {
font: italic 700 16px 'microsoft yahei';
}
必须按语法格式顺序书写 各个属性以空格隔开
不需要设置的可以省略(取默认值) 但必须保留font-size和font-family属性 否则不起作用
总结
font-size 字号 px像素 跟上单位
font-family 字体
font-weight 字体粗细 700和bold 不加粗是normal和400
font-style 字体样式 italic normal
font 字体连写 有顺序 字号和字体必须同时出现
文本属性
作用
文本的外观
颜色 对齐 缩进 行间距
color文本颜色
color:
16进制写法 #ff0000;
RGB代码格式rgb(255,0,0)
text-align对齐文本
text-align 设置水平对齐方式
center left(默认值) right
text-decoration装饰文本
text-decoration 给文本添加下划线、删除线、下划线
none 默认无
underline
overline
line-through
text-indent文本缩进
text-indent 段落的首行缩进
text-indent:20px;
em是一个相对单位,当前元素的1个文字大小来说
line-height行间距
line-height 设置行间距
行间距:上间距+文本高度+下间距
总结
color
text-align
text-indent 首行缩进 2em
text-decoration underline none
line-height
引入方式
样式表
1.行内样式表(行内式)
2.内部样式表(嵌入式)
3.外部样式表(链接式)
内部样式表
写在html内部<style>
可以方便控制整个页面的元素样式
代码结构清晰 没有完全分离
嵌入式
行内样式表
在标签内部写上style属性
<p style="color:pink;">
适合简单样式
外部样式表
适用于外部样式表
建好css文件
使用link标签进行引入
<link rel="stylesheet" href="css文件路径">