day2 前端css（样式）（2022-02-22）
2022-02-22 本文已影响0人
胖胖胖虎
css代码编写方式
- 嵌入编写 将css代码写在html代码文件中 必须将css代码写在style标记中（style标记是head的子标记）
- 外部编写 将css代码写在单独的css文件中（嵌入编写和外部编写语法一致）
html代码中需要使用link标记将css文件引入
- 推荐使用外部编写
- 一个css代码文件中的样式可以被多个html文件使用
- 代码统一 风格统一
- html和css代码彻底的分离 便于各自的代码维护
css基本语法
选择器{
属性名：属性值；
}
（选择器 选择的是需要样式控制的标记）
- 选择器的分类
- 标记选择器 名字就是某一个标记的名字
标记选择器可以一次选择多个相同类型的标记 - 类选择器（最常使用 ）名字是自定义的但是名字前必须加“.”（不能是数字开头）
标记想要被类选择器选择到必须设置class属性
类选择器可以一次选择多个不同类型的标记 - id选择器 选择器的名字是某个标记的id属性值 名字前必须加“#”（不能是数字开头）
id选择器一次只能选择一个标记
只想设置单独一个标记时才会使用id选择器
- css代码具有层叠式特点 多个样式代码可以叠加在一个标记上同时生效
嵌入式编写范例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- css代码需要写在style标记中-->
<style type="text/css">
h1{
color: green;
/* color 文字颜色样式 */
background-color: orange;
/* background-color 背景颜色样式 */
text-align: center;
/* text-align 文本对齐方式 */
}
h2{
color: blue;
text-align: right;
}
.x{
color: gray;
}
/* 类选择器 */
#a2{
font-size: 50px;
}
/* id选择器 */
</style>
</head>
<body>
<h1>我需要梅花</h1>
<h2>我不需要美化</h2>
<hr >
<big class="x">内容变大</big>
<small class="x">内容变小</small>
<strong id="a2">内容加粗</strong>
<!-- id属性具备唯一性 标记设置id属性 属性值不能重复 -->
</body>
</html>
外部编写范例
- css外部编写.css
/* 嵌入编写和外部编写语法一致 */
.blue{
color: skyblue;
}
.nosmall{
font-size: 100px;
}
.border{
border: 10px dashed orange;
/* border 边框样式 需要三个值 粗细 样式(虚实线) 颜色*/
/* solid实线框 dashed虚线框 */
}
#bg{
background-color: grey;
}
- css外部使用1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="外部编写.css"/>
</head>
<body>
<em class="blue nosmall border" id="bg">内容倾斜</em>
</body>
</html>
- css外部使用2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="外部编写.css"/>
</head>
<body>
<h2 class="blue">内容乌苏所谓些啥都行</h2>
</body>
</html>
