一、HTML && CSS
HTML的简述
网页的基本概念
-
网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的 一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读
-
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。 通常我们看到的网页， 常见 以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件
HTML的基本概念
- HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。
- 标记语言是一套标记标签 (markup tag)
- 所谓超文本，有 2 层含义：
- 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）
- 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）
HTML入门代码
<html>
<head>
<title>这是标题</title>
</head>
<body>
<!-- 文章注释 -->
拉勾欢迎你
</body>
</html>
HTML语法特点
-
HTML文件不需要编译，直接使用浏览器阅读即可
-
HTML文件的扩展名是*.html 或 *.htm
-
HTML结构都是由标签组成
- 标签名预先定义好的(内置的)，我们只需要了解其功能即可
- 标签名不区分大小写 <A name=“属性值” age=“18” >标签体</a>
- 通常情况下标签由开始标签和结束标签组成。例如： <a 属性名=“属性值” href=“01_html”>标签体</a>
- 特殊性：单标签，如果没有结束标签，建议以/结尾。例如：<img />
- HTML 标签中还有属性 <a name=“属性值” age=“18” >标签体</a>
-
HTML结构包括两部分：头head和体body
-
注释：
注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊用法，为不同的浏览器提供不同的解决方案 （了解）
基本标签
标题标签
-
HTML提供<hn> 系列标签，用于修饰标题，包含： <h1>、<h2>、<h3>、<h4>、<h5>、<h6> 。 <h1> 定义大的标题；<h6> 定义小的标题
-
特点:
- 加了标题的文字会变的加粗，字号也会依次变大
- 一个标题独占一行
-
示例
<h1>拉勾有勾</h1> <h2>招聘助手</h2> <h3>在线教育</h3> <h4>大厂平台</h4> <h5>一起学习</h5> <h6>必定高新</h6>
段落标签<p>
-
p 标签会自动在其前后创建一些空白
-
标签语义：可以把 HTML 文档分割为若干段落
-
单词 paragraph [ˈpærəgræf] 的缩写，意为段落
-
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
-
示例
<p> 这是第一段 </p> <p> 这是第二段 </p>
换行标签<br/>
-
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望 某段文 本强制换行显示，就需要使用换行标签
-
单词 break 的缩写，意为打断、 换行。
-
标签语义：强制换行
-
特点：
- 是个单标签
- 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
-
示例
第一行<br/> 第二行
字体标签<font>
-
<font> 规定文本的字体、字体尺寸、字体颜色
-
font字体标签的属性
属性 值 描述 color rgb(x ,x ,x) 、#xxxxxx、 colorname 属性color，设置字体的颜色
color = “red”
color = "#FF0000”
stytle = "color:rgb(0,255,255)”
不赞成使用。请使用样式取代它。规定文本的颜色size number 属性size，设置字体的大小，范围为1-7px
不赞成使用。请使用样式取代它。规定文本的大小 -
示例
<font size="7" color="green">我的字体</font> <font size="7" color="#00F">我的字体</font> <font style="color: rgb(0,255,0);">我的字体3</font>
文本格式化标签
-
为文字设置粗体、 斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示
语义 标签 说明 加粗 <strong></strong>或<b></b> 推荐使用<strong> 标签加粗,语义更强 倾斜 <em></em>或<i></i> 推荐使用<em> 标签加粗,语义更强 删除线 <del></del>或<s></s> 推荐使用<del> 标签加粗,语义更强 下划线 <ins></ins>或<u></u> 推荐使用<ins> 标签加粗,语义更强 -
文本格式化标签之间可以嵌套，<strong>要在最外层
图片标签
-
在 HTML 标签中， <img>标签用于定义 HTML 页面中的图像
<img src="图片url路径"/> -
常用属性
属性 属性值 说明 src URL路径 (必有属性)指定需要显示图片的URL（路径） alt 文本 图片无法显示时的替代文本 title 文本 提示文本。鼠标放到图像提示文字 width 像素 设置图像的宽度,单位像素px,也可以是百分比 height 像素 定义图像的高度,单位像素px,也可以是百分比 border 像素 定义图像的高度,单位像素px,也可以是百分比 -
示例
<img src="img/2.jpg" width="200px" /> <img width="20%" src="https://goss2.cfp.cn/creative/vcg/800/new/VCG211247494472.jpg" alt="这群程 序员" /> -
图像标签属性注意
- 图像标签可以拥有多个属性，必须写在标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”
- 长宽高属性的属性值像素和百分比的区别：像素不会随网页变化，百分比使图片随网页变化
列表标签
-
分为有序和无序列表
-
常用标签
标签 属性 取值 描述 ol type A、a 、I 、i 、1 有序列表（默认数字排序） ul type disc 实心圆、square 方块 、circle 空心圆 无序列表(默认实心圆) li type (A、a 、I 、i 、1 ）（disc 实心圆、square 方块 、circle 空心圆） 列表项 -
示例
<!--列表标签--> <ul type="circle"> <!--以“空心圆”显示无序列表--> <li>无序</li> <li>无序</li> <li>无序</li> </ul> <ol type="I"> <!--以大写阿拉伯数字显示序号--> <li>有序</li> <li>有序</li> <li>有序</li> </ol>
超链接标签
-
在 HTML 标签中， 标签用于定义超链接，作用是从一个页面链接到另一个页面
-
超链接标签语法
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> -
超链接属性
属性名 描述 href 用于确定需要显示页面的路径（URL） target 打开页面的方式：
取值1： _blank 在新窗口中打开href 确定的页面。
取值 2 ： _self 默认。使用href确定的页面替换当前页 -
超链接分类
分类 举例 外部链接 例如 < a href="http://www.lagou.com ">拉勾 内部链接 网站内部页面之间的相互链接.例如 < a href=“index.html”> 首页 空链接 如果当时没有确定链接目标时，< a href="#"> 首页 下载链接 如果 href 里面地址是一个文件或者压缩包，会下载这个文件 网页元素链接 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接 锚点链接 点击链接,可以快速定位到页面中的某个位 -
示例
<!-- 采用超链接标签跳转到外网地址 --> <a href="https://www.baidu.com">百度链接</a> <!-- 采用超链接标签跳转到项目位置 --> <a href="demo.html"> 本文档 </a> <!-- 跳转方式 target属性 --> <a href="https://www.baidu.com" target="_blank">百度链接</a> <!-- 采用图片方式跳转 --> <a href="https://www.baidu.com"><img src="img/3.png"></a>
表格标签
-
表格标签作用
- 表格主要用于显示、 展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时 候，能够熟练运用表格就显得很重要。
- HTML表格由 <table> 标签以及一个或多个 <tr>(行标签)、<th>(第一行表头) 或 <td> (单元格)标签组成。
- <th> 中的内容会加粗居中，<td>默认是居左不加粗
-
表格的基本语法
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table 1. <table> </table> 是用于定义表格的标签。 2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table> 标签中。 3. <td> </td> 用于定义表格中的单元格，必须 嵌套在 <tr></tr> 标签中。 4. 字母 td 指表格数据（table data），即数据单元格的内 --> -
标签属性介绍
标签 属性 描述 <table> border 设置边框（像素）
width 宽度（像素/百分比）
height 高度（像素/百分比）
align 位置设定 （left center right）
cellspacing = "0px” 边框双线变单线
bgcolor 背景色
background 背景图父标签，相当于整个表格的容器 <tr> align 内容位置（left center right）
bgcolor 设置背景色属于<table>子标签代表行 <td> colspan 单元格可横跨的列数
rowspan 单元格可竖跨的行数
align 单元格水平对齐方式 （left center right）属于<tr>子标签用于定义一个单元格 <th> colspan 单元格可横跨的列数
rowspan 单元格可竖跨的行数
align 单元格水平对齐方式 （left center right）属于<tr>子标签用于定义表头 -
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1px" width="50%" height="400px" align="center" cellspacing="0px" bgcolor="skyblue" > <tr bgcolor="coral"> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> <tr align="center"> <td>乔峰</td> <td>30</td> <td>丐帮</td> </tr> <tr align="center"> <td align="right" >段誉</td> <td>25</td> <td>大理</td> </tr> </table> </body> </html> -
注： <tr>中设置的背景色优先级高于<table>
-
合并单元格
把多个单元格合并为一个单元格, 合并单元格方式：
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
-
合并单元格三步曲：
- 先确定是跨行还是跨列合并
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2” ></td>
- 删除多余的单元
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1px" align="center" width="30%" height="300px" cellspacing="0px"> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <!--<td>4</td>--> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td colspan="2">8</td> <!--<td>9</td>--> </tr> </table> </body> </html
表单相关标签
表单的基本概念和作用
- 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单
- 使用表单目的是为了收集用户信息
表单的组成
-
一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成
表单的标签
表单域
-
表单域是一个包含表单元素的区域
-
在 HTML 标签中 <form>标签用于定义表单域，以实现用户信息的收集和传递
-
<form>会把它范围内的表单元素信息提交给服务器
-
格式
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
常用属性
-
常用属性
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的URL地址 method get/post 用于设置表单数据的提交方式，其取值为get或post name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域 -
<form>表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交到服务器，负责搜集数据的标签必须存放在表单标签体内容。
-
action属性：请求路径，确定表单提交到服务器的地址（路径）
-
method属性：请求方式。常用的取值：GET、POST
输入域标签 <input>
-
<input type=""> 标签用于获得用户输入信息，type属性值不同，搜集方式不同，是常用的标签。
-
type属性值
-
text:普通文本
-
password:密码输入框,里边的密码以黑色的小圆点显示
-
radio:单选框
-
checkbox:多选框
-
file:上传文件
-
image:上传图片使用
-
hidden:隐藏域,存储数据使用,不会在浏览器页面显示
-
botton:普通按钮,配合js使用
-
reset:重置按钮,把表单的恢复到默认状态(清空表单)
-
submit:提交按钮,把表单的数据,提交到服务器
<form action="#" method="get">
用户名:<input type="text" /><br />
密码:<input type="password"/><br />
请选择您的性别:<br />
男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex"/>
<br />
请选择您的爱好:<br />
篮球<input type="checkbox"/>
足球<input type="checkbox"/>
羽毛球<input type="checkbox"/>
乒乓球<input type="checkbox"/>
<br />
<input type="file"/><br />
<input type="image" src="img/2.jpg" height="100px" width="70px"/><br />
<input type="hidden" /><br />
<input type="button" value="点我试试"/><br />
<input type="reset" /><br />
<input type="submit" /><br />
</form>
-
表单控件的属性
- name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据
- value属性：设置input标签的默认值
- submit和reset为按钮显示数据
- checked属性：单选框或复选框被选中
- readonly：是否只读
- disabled：是否可用
<form action="#" method="post"> 用户名:<input type="text" name="username" value="请输入用户名" readonly="readonly"/> 密码:<input type="password" name="password" value="请输入密码" disabled="disabled"/> <br /> 用户名:<input type="text" name="username" placeholder="请输入用户名"/> 密码:<input type="password" name="password" placeholder="请输入密码"/><br /> <br /> </form> -
注意事项
input type = "text” 必要属性name
input type = "password” 必要属性name
input type = "radio” 必要属性name，要注意多个radio的name属性值要一样
input type = "image” 必要属性name , src 引入图片地址
input type="checkbox” 必要属性name，复选框的name都是一致的， value具体传递到后台的值
input type="submit” value提交按钮的名称
下拉列表标签<select>
-
<select> 下拉列表。可以进行单选或多选。需要使用子标签指定列表项
- name属性：发送给服务器的名称
- multiple属性：不写默认单选，取值为“multiple”表示多选。
- size属性：多选时，可见选项的数目。
- <option> 子标签：下拉列表中的一个选项（一个条目）
- selected ：勾选当前列表项
- value ：发送给服务器的选项值
<!-- select标签:是form子标签 下拉选项标签 子标签:option,下拉选的列表项,一个select标签中包含了多个option标签 --> <select> <option>北京市</option> <option>南京市</option> <option>天津市</option> </select> <select name="city" multiple="multiple" size="2"> <option>北京市</option> <option>南京市</option> <option>天津市</option> </select> <select name="city"> <option>北京市</option> <option selected="selected">南京市</option> <option value="tj">天津市</option> </select>
文本域标签 <textarea>
- 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签<textarea>
- </p><p>使用 多行文本输入控
用例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="#" method="post">
用户名 <input type="text" name="userName" disabled="true"/> <br/>
密码 <input type="password" name="password" readonly="readonly"/> <br/>
性别 <input type="radio" name="sex" value="male" checked/> 男
<input type="radio" name="sex" value="female"/> 女 <br/>
地址
<select name="city" multiple="multiple">
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select> <br/>
头像 <input type="file" name="photo"/> <br/>
兴趣 <input type="checkbox" name="hobby" value="1"> 看书
<input type="checkbox" name="hobby" value="2"> 编程
<input type="checkbox" name="hobby" value="3"> 游戏 <br/>
简介 <textarea cols="20" rows="10"></textarea> <br/>
图片 <input type="image" src=""/> <br/>
隐藏域 <input type="hidden" name="myHidden" value="123456"/> <br/>
<input type="submit" value="提交数据"/>
<input type="reset" value="重置数据"/>
<input type="button" value="普通按钮"/>
</form>
</body>
</html>
div
基本概念
-
div就是html一个普通标签，进行区域划分
-
特性：独自占一行；独自不能实现复杂效果，必须结合CSS样式进行渲染。
-
块标签，可以将网页划分为多个块进行布局
-
块标签分类:
- 行级元素:div — 用于页面布局
- 行内元素:span — 用于页面布局或者消息提示框
<!-- div标签:块标签,行级元素,会霸占html的一行 多个div元素则有多行--> <div>div中的数据</div>div之外的数据 <br /> <!-- span标签:块标签 ,行内元素,不会占用一行， 多个元素也在一行展示 --> <span>span中的数据</span>span外的数据
CSS
基本概念
-
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表
-
CSS 是也是一 种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样 式、边距等）以及版面的布局和外观显示样式
-
CSS 让我们的网页更加丰富多彩，布局更加灵活自如
-
简单理解： CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单
CSS (Cascading Style Sheets) ：指层叠样式表
样式：给HTML标签添加需要显示的效果。
层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用 于该标
CSS样式规则
-
使用HTML时，需要遵从一定的规范，CSS亦如此，要想熟练的使用CSS对网页进行修饰，首先需要了解CSS样式规则
-
具体格式如下
CSS 写在head标签中，设置一个<style>标签 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式,选择器区分大小写 属性和属性值以“键值对”的形式出现 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等 属性和属性值之间用英文“:”分开 多个“键值对”之间用英文“;”进行区<style> h2 { color:red; font-size:100px; } </style>
注意事项
-
CSS样式“选择器”严格区分大小写，“属性”和“属性值”不区分大小写。
-
多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式 最好保留。
-
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如
<style> p { font-family:"Times New Roman";} </style> -
在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，例如
/* 这是CSS注释文本,此文本不会显示在浏览器窗口中 */ -
属性的值和单位之间是不允许出现空格的，否则浏览器解析时会出错。例如，下面这行代码就是不正确的
h1{ font-size:20 px; } /* 20和单位px之间有空格 */
引入css样式
-
CSS使用非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的文件，如果是单独的文件，则必须以.css为扩展名
-
CSS和HTML的结合3种常用方式：
-
行内样式
行内样式，是通过标签的style属性来设置元素的样式
<!--方式1：行内样式 color : 表示字体颜色 font-size : 表示字体大小 --> <a style="color: #f00; font-size: 30px;">拉勾教育</a> -
内部样式
内部样式又称为内嵌式，是将CSS代码集中写在HTML文档的head头部标签体中，并且使用style标签定义<!--方式2：内部样式 background-color ： 表示背景色 --> <head> <style type="text/css"> body{ background-color: #ddd; } </style> </head>内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌 式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为他不能充分发挥CSS代码的重用优势
-
外部样式
外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，在head标签中通过link标签将样式连接到HTML文档中<!--方式3：外部样式 rel="stylesheet" 固定值，当前文件和引入文件的关系,rel是relationship的缩写， stylesheet是样式表 type="text/css" 固定值，表示浏览器解析方式 href 表示css文件位置 font-family 表示使用的字体系列，多个字体使用逗号分隔。例如：“字体1,字体2,字体3”， 此时优先使用“字体1”，如果“字体1”系统不存在，再使用“字体2”，以此类推 --> <head> <link rel="stylesheet" type="text/css" href="css/demo00.css"/> </head>链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个link标 记链接多个CSS样式表
-
-
三种样式的优先级
行内样式>内部样式|外部样式(谁写在后边,使用谁,后边的会覆盖前边的)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引入css的三种方式</title> <style> #div2 { width: 200px; height: 200px; background-color: blue; } </style> <!-- 引入mystyle.css文件到当前html link 引入css的标签 rel 关系,stylesheet 样式表 type 文件类型文本类型的css文件 href 编写地址,引入具体的css文件 --> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body> <!-- 需求: 创建三个div标签, 第一种引入css方式,第一个div 宽度和高度设为200px ,背景色设置为红色; 第二种内部样式,修饰第二个div, 宽度和高度设为200px ,背景色设置为蓝色; 第二种内外样式,修饰第三个div, 宽度和高度设为200px ,背景色设置为黄色; 方式1: 行内式 格式: <div style="属性名1:属性值1; 属性名2:属性值2...."> 方式2:内部式 head标签中编写一个style标签,style标签中编写css样式 <head> <style> 选择器 { 属性名1:属性值1; 属性名2:属性值2; .... } </style> </head> 方式3:外部式 1)创建一个后缀为.css文件 2)编写css文件 选择器 { 属性名1:属性值1; 属性名2:属性值2; .... } 3)html中head标签中 link标签引入css文件 --> <div style="width: 200px; height: 200px; background-color: red;">我的第一个div</div> <div id="div2">我的第二个div</div> <div id="div3">我的第三个div</div> </body> </html>
选择器
- 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素；在CSS中，执行这一任务的样式规则部分被称为选择器
元素选择器
-
标记(标签)选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式
-
基本语法格式
标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
ID选择器
-
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器
-
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
派生选择器
- 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择 器，我们可以使 HTML 代码变得更加整洁。 比方说，你希望列表中的li标签下 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器
注意事项
- 优先级问题:
id选择器 > 类选择器 > 元素选择器
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>介绍css的四类选择器</title>
<style>
/* 1.使用标签选择器(元素选择器) ,选择所有的div标签,设置宽度和高度都为100px ; 设置背景色为黄色 */
div {
width: 100px;
height: 100px;
background-color: yellow;
}
/* 2.使用id选择器 , 选择id为div1的元素,设置宽度和高度200px , 背景色设置为红色 */
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
/* 3.使用类选器,选择所有 class属性 mystyle的元素,设置宽度和高度为300px; 背景色设置为蓝色 */
.mystyle {
width: 300px;
height: 300px;
background-color: blue;
}
/* 4.使用派生选择器,选择div下的p标签,设置边框,设置背景色为 粉色. */
div p {
border: 1px solid black;
background-color: pink;
}
/* 验证id选择器和类选择器的优先级 */
#div3 {
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<!--
需求:
1.使用标签选择器(元素选择器) ,选择所有的div标签,设置宽度和高度都为100px ; 设置背景色为黄色
2.使用id选择器 , 选择id为div1的元素,设置宽度和高度200px , 背景色设置为红色
3.使用类选器,选择所有 class属性 mystyle的元素,设置宽度和高度为300px; 背景色设置为蓝色
4.使用派生选择器,选择div下的p标签,设置边框,设置背景色为 粉色.
注意事项:
优先级问题:
id选择器 > 类选择器 > 元素选择器
-->
<div id="div1">111</div>
<hr/>
<div>222</div>
<hr/>
<div class="mystyle" id="div3">333</div>
<hr/>
<div class="mystyle">444</div>
<hr/>
<div class="mystyle">555</div>
<hr/>
<div>666
<p>div666中的p元素</p>
</div>
<p>最下main的p元素</p>
</body>
</html>
css 样式
边框
-
边框就是给html中的元素设置边线
-
CSS边框属性允许你指定一个元素边框的样式和颜色
-
属性
- border-style 设置线条的样式 （dotted 点状线； dashed 虚线；solid 单实线；double 双实线
- border-width 设置线条的粗细 （10px; 20px）
- border-color 设置线条的颜色
- 简写版： border 1px solid red; (推荐)
-
基本语法
p { border-style:dotted; border-width:1px; border-color:red; } /*或*/ p{ border 1px solid red; } -
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS样式边框</title> <style> /* 1)第一个p标签设置线条为 点状线条 , 宽度1px ,颜色为红色; */ #p1 { border-style: dotted; border-width: 1px; border-color: red; } /* 2)第二个p标签设置线条为 虚线 , 宽度2px ,颜色为蓝色; */ #p2 { border-style: dashed; border-width: 2px; border-color: blue; } /* 3)第三个p标签设置线条为 单实线, 宽度3px ,颜色为黄色; */ #p3 { border-style: solid; border-width: 3px; border-color: yellow; } /* 4)第四个p标签设置线条为 双实线 , 宽度4px ,颜色为粉色; */ #p4 { border-style: double; border-width: 4px; border-color: pink; } /* 5) 采用简化写法设置边框 1px 单实线 金色 */ #p5 { border : 1px solid gold; } </style> </head> <body> <p id="p1">我的第一个p标签</p> <p id="p2">我的第二个p标签</p> <p id="p3">我的第三个p标签</p> <p id="p4">我的第四个p标签</p> <p id="p5">我的第五个p标签</p> </body> </html>
尺寸
-
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距
-
属性
- width 设置宽度 （100px; 20%)
- height 设置高度 （100px)
-
基本语法
p { width: 100px; height: 100px; } -
举例
<style type="text/css"> div{ border:1px solid #000; /*1像素，实边，黑色*/ width:200px; height:200px; } </style>
转换 display
-
HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：行级元素和行内标签。
-
行级元素：
- 以区域块方式出现。每个块标签独自占据一整行或多整行。
- 常见的块元素： <h1>、<div> 等
-
行内元素：
- 不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
- 常见的行内元素： <span>、<a> 等
-
在开发中，希望行内元素具有块元素的特性或者行内元素具有块元素的特性，可以使用display进行转换
-
基本语法
选择器 {display 属性值} -
常用属性值
- inline：此元素将显示为行内元素（行内元素默认的display属性值）
- block：此元素将显为块元素（块元素默认的display属性值）
- none：此元素将被隐藏，不显示，也不占用页面空间
-
转换方式
- 将我们的行级元素转换为行内元素. div==>span
取值: inline - 将我们的行内元素转换成行级元素 span===>div
取值: block - 将指定的元素消失
取值: none - 补充
visibility : hidden 效果是隐藏元素.位置不消失
- 将我们的行级元素转换为行内元素. div==>span
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>display转换</title> <style> div { border : 1px solid black; } span { border : 1px solid red; } </style> </head> <body> <!-- 需求: 1) 第一个div转成行内元素 2) 第一个span标签转成行级元素 3) 第二个div消失掉 (原来的位置也一起消失) 4) 第三个div 隐藏 (原来的位置不消失) --> <div style="display: inline;">这是我的第一个div元素</div> <span style="display: block;">这是我的span标签</span> <div style="display: none;">这是我的第二个div元素</div> <div style="visibility:hidden">这是我的第三个div元素</div> <div>这是我的第四个div元素</div> </body> </html>
字体
-
常用属性
- color：颜色，字体颜色
- font-size:字体的大小,像素px
- font-family:字体,幼圆,宋体,楷体…
- text-decoration: none 取消文字上的下划线
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>font样式</title> </head> <body> <a href="#" style="color: red;">我的第一个超链接</a> <br/> <a href="#" style="font-size: 20px;">我的第二个超链接</a> <br/> <a href="#" style="font-family: 楷体;">我的第三个超链接</a> <br/> <a href="#" style="text-decoration: none;">我的第四个超链接</a> <br/> </body> </html>
背景色
-
常用属性
- background-color:设置背景色
- background-image:url(背景图片的连接)
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景色及背景图片</title> <style> div { border: 1px solid black; width: 300px; height: 300px; } </style> </head> <body> <div style="background-color: cadetblue;"></div> <hr> <div style="background-image: url(img/lagou.png);"></div> </body> </html>
浮动
-
通常默认的排版方式，是将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动
-
特点
- 可以给指定的元素设置浮动，该元素就摆脱了原来普通文档流；漂浮在空中，可以进行左移动也可以进行右移动
-
基本语法
选择器{float:属性值;} -
常用属性值
- left：元素向左浮动
- right：元素向右浮动
- none：元素不浮动（默认值)
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> <style> #one { border : 1px solid red; width: 50px; height: 50px; float: left; } #two { border : 1px solid blue; width: 100px; height: 100px; float:right; } #three { border : 1px solid green; width: 150px; height: 150px; float: left; } </style> </head> <body> <!-- 1)让div1左浮动 2)让div2和div3也左浮动 3)让div2右浮动 让div1 和div3不浮动 4)让div2右浮动 让div1左浮动 div3也左浮动 --> <div id="one" class="mystyle"></div> <div id="two" class="mystyle"></div> <div id="three" class="mystyle"></div> </body> </html>
清除浮动
-
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，需要使用 clear属性进行清除浮动
-
基本语法
选择器{clear:属性值;} -
常用属性值
- left：不允许左侧有浮动元素（清除左侧浮动的影响）
- right：不允许右侧有浮动元素（清除右侧浮动的影响）
- both：同时清除左右两侧浮动的影响
-
注意事项
- 影响自己的浮动，需要清除自己元素的浮动
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> <style> #one { border : 1px solid red; width: 50px; height: 50px; float: right; } #two { border : 1px solid blue; width: 100px; height: 100px; float:right; clear:both; } </style> </head> <body> <!-- 清除div2的左浮动 --> <div id="one" class="mystyle"></div> <div id="two" class="mystyle"></div> </body> </html>
盒子模型
-
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
-
我们可以设置这个盒子到其他和盒子之间的距离，使用css的属性:
- margin,设置外边距
- margin:同时设置4个外边距
- margin-top:上外边距
- margin-bottom:下外边距
- margin-le:左外边距
- margin-rigt:右外边距
-
也可以设置这个盒子中html元素到盒子之间的距离，使用css的属性:
- padding,设置内边距
- padding:同时设置4个内边距
- padding-top:上内边距
- padding-bottom:下内边距
- padding-le:左内边距
- padding-rigt:右内边距
-
注意事项
外边距：设置元素在页面的位置
边框：设置改元素边框的粗细，样式等
内边距：设置元素内容和边框的举例
内边距的副作用：如果设置了内边距则会导致div元素变形
-
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> body { margin: 0px 0px 0px 0px; } div { border : 1px solid red; width: 200px; height: 200px; margin-top: 100px; margin-left: 100px; margin-right: 100px; margin-bottom: 100px; border-top: 10px solid red; border-left: 5px solid red; border-right: 15px solid red; border-bottom: 10px solid red; padding-top: 100px; padding-left: 100px; padding-right: 100px; padding-bottom: 100px; } </style> </head> <body> <!-- 1.div距离上面100像素 2.div距离左边100像素 3.div的边框 上边框10像素 有边框为5像素 下边框为15像素 做边框为10像素 --> <div>我的div内容</div> </body> </html>
案例
-
完成如下效果
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css案例</title> <style> /* 1.清除body的margin */ body { margin: 0px 0px 0px 0px; } /* 2.设置head booter 这两块div */ .head , .footer { width: 1519px; height: 100px; background-color: #7ecef3; } /* 设置main */ .main { height: 600px; width: 100%; } /* 设置leftbar */ .leftbar{ width: 400px; height: 600px; background-color:#89c997 ; float: left; } /* 设置conent */ .content{ width: 719px; height: 600px; background-color:#2ba2a8 ; float: left; } /* 设置rightbar */ .rightbar{ width: 400px; height: 600px; background-color:#89c997 ; float: left; } /* 设置div的字体 */ div { color: blanchedalmond; font-size: 40px; text-align: center; } </style> </head> <body> <!-- 1.编写一个大的div class box --> <div class="box"> <!-- 2.编写第二个div head --> <div class="head">head</div> <!-- 3.编写第三个div main --> <div class="main"> <!-- 3.1 leftbar --> <div class="leftbar">lefbar</div> <!-- 3.2 content --> <div class="content">content</div> <!-- 3.3 rightbar --> <div class="rightbar">rightbar</div> </div> <!-- 4.编写第四个大的div footer --> <div class="footer">footer</div> </div> </body> </html>
注：本内容为个人拉勾教育大数据训练营课程笔记
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
