02 CSS基础入门

文章目录

一、CSS介绍
- 1. 简介
- 2. 相关网站
- 3. HTML引入方式
二、选择器
- 1. 标签选择器
- 2. 类选择器
- 3. ID选择器
- 4. 群组选择器
四、样式
- 1. 字体样式
- 2. 文本样式
- 3. 边框样式
- 4. 表格样式
五、模型和布局
- 1. 盒子模型
- 2. 网页布局

一、CSS介绍

1. 简介

CSS主要用于控制网页的外观，将网页的格式与内容分离。
通过使用CSS，网页可以精确地控制字体、颜色、布局、位置等元素，实现个性化的网页设计。
CSS样式可以直接存储在HTML网页中，也可以单独保存为外部样式表文件。

2. 相关网站

CSS 教程
CSS 参考手册

3. HTML引入方式

外部引入

<link rel="stylesheet" href="CSS文件路径">

内部引入

<style>
CSS具体内容，下面的例子都是内部引入
</style>

行内引入

<标签 style=""></标签>

引入方式的区别

引入方式	位置	作用范围
外部引入	CSS写在单独的css文件中	多个页面
外部引入	CSS写在head头部style标签中	当前页面
行内引入	CSS写在标签的style属性中	当前标签

二、选择器

1. 标签选择器

通过标签名称，设置CSS样式

h2 {color: red;
}

作用于

<h2>测试页面</h2>

HTML页面效果

2. 类选择器

通过类名称，设置CSS样式

.color-style {color: red;
}

作用于

<h2 class="color-style">测试页面</h2>

HTML页面效果

3. ID选择器

通过ID名称，设置CSS样式

#idname {color: red;
}

作用于

<h2 id="idname">测试页面</h2>

HTML页面效果

4. 群组选择器

查找符合条件的标签，设置CSS样式

p,h2 {color: red;
}

作用于

<h2>测试页面</h2>
<p>测试段落</p>

HTML页面效果

四、样式

1. 字体样式

h2 {font-family: Arial;font-size: 30px;font-weight: bold;font-style: italic;color: #000000;
}

作用于

<h2>测试页面</h2>

HTML页面效果
font-family 字体类型
font-size 字体大小
font-weight 字体粗细
font-style 字体风格
color 字体颜色

2. 文本样式

h2 {text-align: center;text-decoration: line-throught;line-height: 36px;
}

作用于

<h2>测试页面</h2>

HTML页面效果
text-align 水平对齐 left center right
text-decoration 文本修饰 underline line-throught overline
line-height 行高

3. 边框样式

h2 {border-width: 1px;border-style: dashed;border-color: red;
}

作用于

<h2>测试页面</h2>

HTML页面效果
border-width 边框宽度
border-style 边框外观 dashed solid
border-color 边框颜色

4. 表格样式

table,tr,th,td {border: 1px solid;
}
table {caption-side: top;border-collapse: separate;border-spacing: 6px;
}

作用于

<table><caption>表格</caption><tbody><tr><td>姓名</td><td>性别</td></tr><tr><td>张三</td><td>男</td></tr></tbody>
</table>

HTML页面效果
caption-side 表格标题位置 top bottom
border-collapse 表格边框合并 separate collapse
border-spacing 表格边框间距

五、模型和布局

1. 盒子模型

h2 {width: 300px;overflow: scroll;text-align: center;border: 25px solid green;padding: 25px 25px 25px 25px;margin: 25px 25px 25px 25px;
}

作用于

<h2>测试页面</h2>

HTML页面效果
所有HTML元素可以看作盒子，包括：边距，边框，填充，实际内容
margin 外边距上像素值右像素值下像素值左像素值
padding 内边距上像素值右像素值下像素值左像素值
content 内容区 width height overflow
2. 网页布局

.header,.footer{width: 500px;height: 60px;background: green;
}
.topnav {width: 500px;height: 50px;background: red;
}
.main{width: 500px;height: 300px;background: blue;}
.left,.right{background: #c9e143;width: 100px;height: 300px;
}
.left{float: left;
}
.right{float: right;
}

作用于

<body><div class="header"></div><div class="topnav"></div><div class="main"><div class="left"></div><div class="right"></div></div><div class="footer"></div>
</body>