本文详细介绍了CSS的基础知识，包括什么是CSS、如何在HTML中引入CSS（style属性、style标签、外部CSS文件），以及CSS选择器的使用，如标签名选择器、class选择器、id选择器、后代选择器和属性选择器。此外，还总结了常用的CSS属性，如文本属性、字体属性、背景属性和边框属性，并提供了实际的代码示例。最后，文章提到了CSS的display属性和网页开发实战练习。
CSS概述
什么是CSS？(了解)
CSS: 层叠样式表，用于修饰、渲染网页的一门技术
使用css样式修饰网页，可以实现将设置样式的css代码和展示数据的html代码进行分离，增强了网页的展示能力！
在HTML中引入CSS
方式1：通过style属性引入css（不推荐）
<!--
1.通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px;background:pink;">这是一个div...</div>
由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。
将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！
并且使用这种方式无法将html标签和css样式进行分离!
因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）
方式2：通过style标签引入css
在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式
这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！
初步的实现了将html标签代码和css样式代码进行了分离!
代码示例 ：
<!-- 2.通过style标签给span设置样式如下：
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<head>
<meta charset="utf-8" />
<style type="text/css">
/* ****** CSS样式 ****** */
span{ /* 为当前html中的所有span标签设置样式 */
border:2px solid green;
font-size:30px;
font-weight:bolder; /* bold/bolder */
}
</style>
</head>
方式3：通过link链接引入外部的css文件
在head标签内部，通过一个link标签可以引入外部的CSS文件
这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。
代码示例：html中引入demo.css文件
<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下：
边框: 2px solid blue;
字体颜色:red
字体设置为华文琥珀
设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet" href="demo.css" />
demo.css文件
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: 华文琥珀;
text-indent: 50px;
}
CSS选择器
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
标签名选择器
通过元素名称(或标签名称)选中指定名称的所有标签
格式: 元素名/标签名{ css样式... }
/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}
class选择器
可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。
格式：.class值{ css样式... }
实例:
/* ----- 2.类选择器练习 -----
(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
background: #5eff1e;
color: #ec0e7e;
}
另外，一个元素也可以设置多个class值，多个class值中间用空格分隔，例如：
<span class="s1 s2" >span111</span>
表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。
如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！
内容补充：选择器优先级顺序：
（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。
（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)
id选择器
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。
格式：#id值{ css样式 }
/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}
<p id="p1">这是一个p元素!!!</p>
后代选择器
选中指定元素内部的指定后代元素
格式: 祖先 后代{ css样式... }
/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */
<p id="p1">
这是一个p元素!!!
<span>这是一个span元素!!!</span>
</p>
属性选择器
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素
格式：选择器[属性条件]...{ css样式 }
/* ----- 5.属性选择器 -----
为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的input并且type值为text、并且name为email的元素 */
background : yellow;
}
常用属性总结
文本属性
1、text-align：设置元素中文本水平对齐方式，其常用取值为:
left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐
2、text-decoration：设置文本的下划线样式，其常用取值为:
underline: 有下划线
none: 没有下划线
3、text-indent：设置文本首行缩进，单位: 像素/百分比
4、letter-spacing：设置字符间隔/间距，其常用取值为:
normal
像素值
5、text-shadow：设置字体阴影，其取值为:
像素值 像素值 像素值 颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色
字体属性
font-size：设置字体大小
font-weight：设置字体粗细 bold、bolder、normal 100/200/300../900
font-family：设置字体，比如微软雅黑、黑体、楷体等
color：设置字体颜色
背景属性
background-color：设置背景颜色
background-image：设置背景图片，url('图片的路径');
background-repeat：设置或检索对象的背景图像是否及如何铺排，常用取值：
repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)
background-position：设置或检索对象的背景图像位置
background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置
边框（border）
border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)
border属性可以拆分为如下设置:
border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色
其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度
其他属性
width：设置元素的宽度
height：设置元素的高
补充: 颜色设置
颜色取值方式常见的方式有三种:
方式一：设置颜色名，例如：
red、green、blue、yellow、cyan、pink、white、black等
方式二：设置#加上六位的十六进制数值
#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、#00FFFF（cyan）等
方式三：设置rgb颜色值
rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
（red） （green） （blue） （yellow） （cyan）
网页开发实战
完成JT项目中的注册页面!(课下一定要自己独立完成!)
完成JT项目中的登录页面!(选作!)
扩展内容
display属性
display用来设置元素的类型，常用取值：
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)
htmlcss作业
05-07作业：
1、使用html+css实现一个4*4的表格, 并设置边框、背景等样式
2、完成课上讲的注册表单页面(能提交数据)
05-08作业：
1、练习CSS的三种引入方式、练习CSS选择器
2、完成课上讲的京淘注册页面（头部+尾部）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--图像标签：在网页中插入一副图像 ctrl+shft+/
src:用于指向图片的地址，在引入图片书写路径时，不要写带盘符的绝对路径，
是因为将来项目移动到别的位置(换一个发布位置)，这个路径就很可能是错误的
width:用于指定图片的宽度，height:用于指定图片的高度
alt:指定的文本的内容将会在图片加载失败时显示
推荐写相对；路径(相对于当前文件的访问位置，去找所引入的文件)
./:表示当前文件所在的位置
../:表示当前文件所在位置的上一级目录
-->
<img src="img/meinv.jpg" width="50%" alt="这是一个美女"/>
<hr />
<!-- 插入一个超链接标签
点击超链接可以跳转到另外一个网页/图片、下载地址
href属性:用于指定点击超链接后将会跳转到的网址
target属性:指定以何种放式打开超链接，取值为_self,表示在当前窗口打开超链接
_blank,表示在新窗口中打开超链接
-->
<a href="http://www.baidu.com" target="_blank">百度一下，你就不知道</a>
<hr />
<a href="./img/wht.jpg" target="_blank">美男</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 插入一个3*3的表格
table:定义一个表格
tr:(table row)定义一个表格行
td:(table data cell) 定义一个单元格
th:(table header cell)定义一个表都行的单元格
(其中的文本默认会加粗并且居中显示)
border:指定表格的边框
cellspacing:指定表格边框和单元格边框之间的距离，0表示边框合并
cellpadding:指定单元格边框和内容之间的距离
bordercolor:指定边框颜色
bgcolor:指定表格的背景颜色
align:指定表格的排列方式，left:表示居中，center表示居中，right表示居右
-->
<table border="2px" cellspacing="0" cellpadding="5px"
bordercolor="red" width="70%" bgcolor="lightgrey" align="center">
<tr>
<th>单元格11</th>
<th>单元格12</th>
<th>单元格13</th>
</tr>
<tr>
<td>单元格21</td>
<td>单元格22</td>
<td>单元格23</td>
</tr>
<tr>
<td>单元格31</td>
<td>单元格32</td>
<td>单元格33</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 align="center">欢迎注册</h1>
<!-- action="#"，用#代替url地址-->
<form action="#">
<table border="1px" cellspacing="0" cellpadding="5px"
bordercolor="red" bgcolor="lightgrey" align="center">
<tr>
<!-- 用户名 -->
<td>用户名:</td>
<td><input type="text" /></td>
</tr>
<tr>
<!-- 密码 -->
<td>密码:</td>
<td><input type="password" /></td>
</tr>
<tr>
<!-- 性别-->
<td>性别:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<!-- 爱好 -->
<td>爱好:</td>
<td>
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />排球
</td>
</tr>
<tr>
<!-- 城市 -->
<td>城市:</td>
<td>
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</td>
</tr>
<tr>
<!-- 自我描述 -->
<td>自我描述:</td>
<td>
<textarea rows="5" cols="30" placeholder="请输入描述信息....."></textarea>
</td>
</tr>
<tr>
<!-- 提交按钮，colspan:指定单元格横跨的列数
rowspan:指定单元格竖跨的行数-->
<td colspan="2" align="center">
<input type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个网页</title>
</head>
<body>
<!--ctrl+shift+/ -->
<h1>欢迎大家来到达内学习JAVA培优课程</h1>
<h1>欢迎大家来到达内学习JAVA培优课程</h1>
<!-- 在浏览器中，多个连续的空白符，会被当成一个空格来显示，
可以使用 代替空格
可以使用<br/>代替 换行
-->
aaa bbb ccc ddd
<hr/>
aaa<br/>
bbb<br/>
ccc<br/>
ddd<br/>
<hr/>
用户名:<input><br/>
密 码:<input/>
</body>
</html>
扫一扫
2523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
