HTML CSS（1）-CSDN博客

本文链接：https://blog.csdn.net/valutang/article/details/138974328

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;
}

文字控制属性
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

调试工具-谷歌浏览器
打开调试工具
浏览器窗口内任意位置/选中标签->鼠标右键->检查
使用调试工具