**方式2：通过style标签引入css**
在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式
这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！
初步的实现了将html标签代码和css样式代码进行了分离!
代码示例 ：
```html
<!-- 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文件
```html
<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下：
边框: 2px solid blue;
字体颜色:red
字体设置为华文琥珀
设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet" href="demo.css" />
```
demo.css文件
```css
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}
```
CSS选择器
---------
所谓的选择器就是能够在html中帮助我们选中元素进行修饰的一门技术。
### 标签名选择器
通过元素名称(或标签名称)选中指定名称的所有标签
格式: **元素名/标签名{ css样式... }**
```css
/* ----- 1.标签名选择器练习 -----
将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}
```
### class选择器
可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组，class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。
格式：**.class值{ css样式... }**
实例:
```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值中间用空格分隔，例如：
```html
<span class="s1 s2" >span111</span>
```
表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元素上。
如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，写在后面的样式会覆盖前面的样式！
---
内容补充：选择器优先级顺序：
（1）如果是同一类选择器，同时给某些元素设置了样式，如果样式冲突了，那么写在后面的样式会覆盖前面的样式。
（2）如果是不同的选择器，设置的样式优先级顺序是：id选择器(100) > 类选择器(10) > 元素名选择器(1)
---
### id选择器
通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。
格式：**#id值{ css样式 }**
```css
/* ----- 3.id选择器练习 -----
用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}
```
```html
<p id="p1">这是一个p元素!!!</p>
```
### 后代选择器
选中指定元素内部的指定后代元素
格式: **祖先 后代{ css样式... }**
```css
/* ----- 4.后代选择器练习 -----
为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */
```
```html
<p id="p1">
这是一个p元素!!!
<span>这是一个span元素!!!</span>
</p>
```
### 属性选择器
在选择器选中元素的基础上，根据元素的属性条件筛选/过滤元素
格式：选择器`[属性条件1][属性条件2]`...{ css样式 }
```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`：设置字体粗细 normal、bold、bolder 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：设置元素的高
margin: 设置元素的外边距
```
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;
```
### 补充: 颜色设置
颜色取值方式常见的方式有三种:
方式一：设置颜色名，例如：
```
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项目中的注册页面!(选作!)
注册页面视频：https://www.bilibili.com/video/BV16K4y1x7wX
扩展内容
--------
### display属性
display用来设置元素的类型，常用取值：
```
block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素
```
### 元素类型(了解)
div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。
**(1)块级元素（block）**
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
**(2)行内元素（inline）**
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
**(3)行内块元素（inline-block）**
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和高)
扫一扫
1146
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
