1.引入方式
内嵌式
css写在style标签中，style标签一般写在head标签里面，title标签下面
<style>
/* css注释 */
/* 这里写的都是css */
/* 选择器 {css属性} */
/* 选择器: 查找标签 */
p {
/* 文字颜色变红色 */
color: red;
/* 字变大 px:像素 */
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* width height; */
width: 400px;
height: 400px;
}
</style>
外联式
写在一个单独的.css文件中，需要通过link标签在网页中引入
<link rel="stylesheet" href="./my.css">行内式
写在标签的style属性中，一般配合js使用
<div style="color: green; font-size: 30px;">这是div标签</div>总结代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式-->
<style>
span{
color: red;
}
</style>
<!-- 外部样式-->
<link href="../css/demo.css" rel="stylesheet">
</head>
<body>
<!-- 内联样式-->
<div style="color: red">hello css</div>
<span>hello css </span>
<p>hello css</p>
</body>
</html>2.选择器
标签选择器
<style>
/* 选择器 {} */
/* 标签选择器 就是 以标签名命名的选择器 */
p {
color: red;
}
/* 标签选择器 选中所有的这个标签都生效css */
</style>
类选择器
class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
<style>
.red {
color: red;
}
.size {
font-size: 66px;
}
</style>
<!-- 一个标签可以使用多个类名 , 需要空格隔开即可 -->
<p class="red size">222</p>
<div class="red">这个标签文字也要变红</div>
id选择器
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
<style>
/* 定义id选择器 */
#blue {
color: skyblue;
}
</style>
<div id="blue">这个div文字是蓝色的</div>
<p id="blue">111</p>
通配符选择器
找到页面中所有的标签，设置样式
<style>
* {
color: red;
}
</style>
<div>div</div>
<p>pppp</p>
<h1>h1</h1>
<span>span</span>
3.字体和文本样式
1.字体样式
1. 字体大小：font-size
取值： 数字 + px谷歌浏览器默认文字大小是16px单位需要设置，否则无效
2. 字体粗细：font-weight
关键字： 正常：normal 加粗：bold纯数字： 100~900的整百数 正常：400 加粗：700
3. 字体样式：font-style
（是否倾斜）
正常（默认值）：normal倾斜：italic
4. 字体类型：font-family
具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……字体系列：sans-serif、serif、monospace等……
5. 字体类型：font属性连写
(复合属性)
font : style weight size family;
font:italic 700 66px 宋体; //倾斜 字体粗细 像素 字体 可以省略前面两个属性（默认）
1358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
