一、CSS 层叠样式表

CSS 全称 Cascading Style Sheets , 层叠样式表 ; 作用如下 :

设置 HTML 页面文本内容的字体 , 颜色 , 大小 , 对齐方式 , 背景 , 排版等样式 ;
设置 HTML 页面图片内容的大小 , 位置 , 边框 , 边距等样式 ;
设置 HTML 布局版面的外观样式 ;
针对不同浏览器设置不同样式 ;

在 HTML 中 , 只关注内容语义 ,

做出的页面很丑 , 不能满足网页美观展示的需求 ;
逐个修改 HTML 标签的属性 , 操作很繁琐 , 需要为每个标签逐个添加样式 ;
操作 HTML 属性很不方便 ;

CSS 的推出 , 解决了上面的问题 , 使用 CSS 可以让页面更加美观 ,布局更加灵活 ;

HTML 只专注于页面结构 , 语义 , 内容等结构内容呈现相关工作 , 美观的样式需要通过 CSS 进行实现 ;

结构样式分离 :

HTML 文件中最好只包含标签 ,
CSS 样式放在独立的 CSS 文件中 ;

二、CSS 引入方式 - 内联样式

1、内联样式语法

CSS 的内联样式引入方式 , 又称为行内样式或行间样式 ;

CSS 的样式写在标签内部 ;

CSS 内联样式语法如下 :

在标签的 style 属性中 , 可以写若干 属性名称:属性值; 组合 ;
每个组合的属性名称和属性值使用冒号隔开 ;
每个属性组合使用分号结尾 ;
属性值组合之间使用空格隔开 ;

<标签 style="属性名称1:属性值1; 属性名称2:属性值2;"> 标签内容 </标签>

所有的 HTML 标签都有 style 属性 , 都可以使用内联样式设置 CSS 样式 ;

2、内联样式缺点

内联样式的缺点 :

只能控制当前 HTML 标签的样式 , 每个标签都要写一遍样式 , 会造成代码冗余 ;
CSS 样式和 HTML 标签都在一个文件中 , 没有实现样式与结构分离 ;

3、内联样式代码示例

① 核心代码示例

<h3 style="color:red; font-size:20px;">用户注册信息</h3>

② 完整代码示例

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>用户注册</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 设置表格宽度 600 像素, 表格居中 -->
		<table width="600" align="center" border="1">
			<!-- 设置表格标题 -->
			<caption><h3 style="color:red; font-size:20px;">用户注册信息</h3></caption>
			<!-- 第一行数据 -->
			<tr>
				<!-- 第一行第一列 -->
				<td>性别</td>
				<td>
					<!-- 单选按钮 选择性别 -->
					<input type="radio" name="sex" checked="checked" />
					<img src="images/man.jpg" /> 男
					<input type="radio" name="sex" />
					<img src="images/women.jpg" /> 女
				</td>
			</tr>
			<!-- 第二行数据 -->
			<tr>
				<!-- 第二行第一列 -->
				<td>籍贯</td>
				<td>
					<!-- 下拉列表 -->
					<!-- 省份选择 -->
					<select>
						<option>--请选择省--</option>
						<option>河北省</option>
						<option>山东省</option>
						<option>河南省</option>
						<option>山西省</option>
					</select>
					<!-- 地区选择 -->
					<select>
						<option>--请选择市--</option>
						<option>衡水市</option>
						<option>邢台市</option>
						<option>保定市</option>
						<option>邯郸市</option>
					</select>
					<!-- 县选择 -->
					<select>
						<option>--请选择县--</option>
						<option>冀州区</option>
						<option>枣强市</option>
						<option>深州市</option>
						<option>桃城区</option>
					</select>
				</td>
			</tr>
			<!-- 第三行数据 -->
			<tr>
				<td>邮箱</td>
				<td>
					<input type="text" value="请输入邮箱">
				</td>
			</tr>
			<!-- 第四行数据 -->
			<tr>
				<td>关注领域</td>
				<td>
					<input type="checkbox" name="like1"> 移动开发
					<input type="checkbox" name="like2"> 后端开发
					<input type="checkbox" name="like3"> 前端开发
				</td>
			</tr>
			<!-- 第五行数据 -->
			<tr>
				<td>个人简介</td>
				<td>
					<textarea cols="50" rows="5">  </textarea>
				</td>
			</tr>
			<!-- 第六行数据 -->
			<tr>
				<td></td>
				<td>
					<input type="image" src="images/btn.png" />
				</td>
			</tr>
			<!-- 第七行数据 -->
			<tr>
				<td></td>
				<td>
					<a href="https://www.baidu.com/">已有账号，立即登录</a>
				</td>
			</tr>
		</table>
    </body>
</html>