CSS学习
css写法
<!--//第一种写法,直接写在html里面-->内部样式表
<title>初学CSS</title>
<style>
p{//选择器CSS属性
color:aqua;文字颜色
font-size:10px;字号
}
</style>
<p>体验CSS</p>
外部样式表:开发使用
css代码单独写在CSS文件中(.css)
在html中,用link标签引用
<link rel="stylesheet" href="">rel中的stylesheet是样式表,href里的是地址
行内标签:配合js使用
<div style="color:antiquewhite;font-size:20px;">这是div标签</div>
选择器
标签选择器:使用标签名作为选择器
类选择器:定义类选择器.类名->使用类选择器:标签添加class=“类名”
<title>类选择器</title>
<style>
.red{
color:aqua;文字颜色
}
.size{
font-size:10px;字号
}
</style>
<p class="red">体验CSS</p>
<p class="red size">体验CSS</p>
id选择器(一般配合js使用)
定义id选择器 #id名
使用id选择器 标签名添加id=“id名”
<style>
#red{
color:aqua;文字颜色
}
</style>
<div id="red">这是div标签</div>
同一个id选择器在一个页面中只能使用一次
通配符选择器:*不需要调用,浏览器自动查找页面所有标签,设置相同的格式
<style>
*{
color:aqua;
}
</style>使用场景:开发初期解决初始化
画盒子
属性名:width 宽度 height高度 background-color 背景色
<style>
.red{
width:100px;
height:100px;
background-color:brown;
}
</style>
<div class="red">div1</div>
字体修饰属性
font-size 文字大小(默认16px) font-weight文字粗细(数字:400/700(开发使用)正常normal/加粗bold)
font-style文字倾斜 作用:清楚浏览器默认的倾斜效果(正常normal/倾斜itaLic)
line-heignt行高(第一种写法:数字+px;第二种写法:数字(当前font-size的倍数))
font-family:楷体;字体族 网页开发建议使用无衬字体族(sans-serif)
font复合属性 使用场景:设置网页公共字体样式
font-itaLic,700,10px/2,楷体;是否倾斜、是否加粗、字号、行高、字体族(必须按顺序写,必须写字号和字体,否则不生效)
text-indent 文本缩进 属性值(1.数字+px 2.数字+em(1em=当前标签的字号大小))
text-align文本对齐 属性值(left:左对齐(默认)center(居中对齐) right(右对齐))
color 颜色 属性值
text-decoration 修饰线 属性值(none无 underline下划线 line-through删除线 overline上划线)