CSS
层叠样式表(Cascading Style sheets)
样式表语言
html和CSS是两种语言
基础选择器
CSS写在html<head></head>里面
属性名和属性值成对出现,叫做键值对
<style>
/* 选择器{属性名:属性值;}*/
p{
/*CSS属性*/
color:red;/*文字颜色*/
font-size:30px;/*字号*/
}
</style>
CSS引入方式
内部样式表
CSS写在style标签里
外部样式表
CSS写在CSS文件中
p {
color:red;
}
在HTML使用link标签引入
<link rel="stylesheet" href="./my.css">
/*link 引入外部样式表 rel :关系,样式表*/
行内样式表
配合javaScript
CSS写在style属性值里
<div style ="color:red;font-size:20px;">这是div标签</div>
选择器
基础选择器:
标签选择器
标签名作为选择器
类选择器
定义类选择器->.类名
使用类选择器->标签添加class="类名"
类名可以用-连接单词
.red{
color:red;
}
.size{
font-size:20px;
}
/*一个标签可以使用多个类名,空格隔开*/
<p class="red size">1111</p>
id选择器
查找标签,差异化设置标签的显示效果
通常配合JS使用
定义id选择器 #id名
使用id选择器 id=“id名”
通配符选择器
*,不要调用,
*{
color:red;
}
画盒子
width 宽度
hieght 高度
background-color 背景色
.red{
width:100px;
height:100px;
background-color:red;
}
<div class="red">div1</div>
文字控制属性
font-size 字体大小
单位px
p{
font-size:20px;
}
谷歌浏览器默认16px
font-weight 字体粗细
normal 正常
bold 加粗
400 正常
700 加粗
font-style 字体倾斜
清楚文字默认的倾斜效果
normal 正常(不倾斜)
italic 倾斜
em{
font-style:normal;
}
div{
font-style:italic;
}
line-height 行高
设置多行文本的间距
数字+px
数字(当前标签font-size属性值的倍数)
p{
line-height:30px;
}
div{
line-height:2;
}
上间距
文本高度
下间距
垂直居中
div{
height:100px;
backgound:skyblue;
/*单行文字垂直居中*/
line-height:100px;
}
font-family字体族
字体名
font-family:楷体;
font-family属性值可以书写多个字体名,每个字体名用逗号隔开,执行顺序从左向右一次查找
font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino San GB,"\5B88\5F53",sans-serif
最后一个设置一个字体族名,网页开发建议使用无衬线字体
font 字体复合属性
一个属性可以完成 font-size,font-weight,font-style,line-height,font-family
必须写字号和字体
div{
/*是否倾斜,是否加粗,字号/行高,字体*/
font:italic 300 30px/2 楷体
}
text-indent 文本缩进
数字+px
数字+em (1em=当前标签字号的大小)
p{
text-indent:2em;
font-size:30px;
}
text-align 文本对齐
left 左对齐
center 居中对器
right
h2{
text-align:center;
}
水平对齐方式-图片
<style>
div{
text-align:center;
}
</style>
<div>
<img src="图片 " alt="">
</div>
text-decoration 修饰线
none 无
underline 下划线
line-through 删除线
overline 上划线
div{
text-decoration:underline;
/*text-decoration:none;
text-decoration:overline;
text-decoration:line-through;*/
}
color 颜色
颜色关键字 red,blur..
rgb表示法 rgb(r,g,b) 红绿蓝三原色,取值0~255
rgba表示法 rgba(r,g,b,a)表示透明度0~1
十六进制表示法 #000000
调试工具-谷歌浏览器
打开调试工具
浏览器窗口内任意位置/选中标签->鼠标右键->检查
使用调试工具