第一章 HTML 和 CSS

已于 2022-11-22 20:55:45 修改
阅读量628 收藏
点赞数
分类专栏： 前端 文章标签： html 前端
于 2022-11-22 20:55:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43352648/article/details/127989833
版权

内容来源于蓝桥杯竞赛，自己根据这个提纲重新巩固下前端的知识

第一章 HTML 和 CSS

  • 一个基本的 HTML 模版需要 <!DOCTYPE html> 去声明文档的类型。
  • 然后需要一对 html 标签去搭建 HTML 房子的框架。
  • 在房子里面有两层楼，头部信息住在 head 标签楼里，页面显示内容住在 body 楼里。

HTML 基本结构

html
meta

提供作者信息

title
  1. 可以在浏览者保存该页面时成为默认的保存文件名。
  2. 可以在浏览者将该网址添加进收藏夹时成为收藏夹中该网址的名称。
  3. 方便搜索引擎索引页面。
  4. 搜索引擎显示的页面标题往往就是网页 <title> 标签的内容。
body

行内标签

a标签
链接邮箱和电话：
<a href="mailto:邮箱地址"></a> <a href="tel:电话号码"></a>
书签文档

先定义书签超链接，然后定义超链接指向位置。使用以下语法定义书签：

<a name="书签名称">文字</a>

定义了书签后，链接到该书签的超链接，其基本语法为：

<a href="#书签名称">链接点</a>
target
<a target="_blank|_self|_top|_parent"></a>
属性值描述
_blank在新窗口中打开被链接文档。
_self在相同的框架中打开被链接文档。
_top在整个窗口中打开被链接文档。
_parent在父框架集中打开被链接文档。
span标签

span 标签是用来组合文档中行内元素的，比如你在文档中写入一些文字，页面会以默认样式输出这些文字，若我们想给这段话中的某些词语添加不一样的字体颜色，这时我们可以用 span 标签去包裹这些词语，然后通过 span 标签去设置字体颜色。

<body>
    <span style="background-color:cornflowerblue">蓝桥</span>
    <span>云课</span>
  </body
strong 标签

在 HTML 中，可以使用 strong 标签来给文字加粗。

<body>
    <strong>VS Code</strong> 是受欢迎的开发工具。
  </body>
img标签
<img src="图像 URL" alt="图像描述" align="对其位置" title="设置鼠标悬停提示内容"/>

块级标签

区别在于 span 是行内元素，可以和其他元素共处一行，而 div 是块级元素，无论大小都不允许其他元素占自己的地盘。div独占一行

p标签

标签用于对文本内容分段，因为我们不能像在 word 里编辑文本那样使用回车来换行。

属性值说明
left段落左对齐
right段落右对齐
center段落居中对齐
列表标签
有序列表

可以使用 type 属性来改变排序符号，取值如下所示：

属性值说明
A用大写字母作为排序符号
a用小写字母作为排序符号
I用大写罗马字符作为排序符号
i用小写罗马字符作为排序符号
1用数字作为排序符号

我们默认都是从第一个字母或数字开头来排序的，其实我们可以通过 start 属性，来自定义起始排序符号。start 属性必须要配合 type 属性来使用。例如：

<!--从第 4 个大写罗马数字开始排序-->
<ol type="I" start="4"> // ol代表有序列表
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ol>
无序列表

我们使用 type 属性可以修改列表开头的符号，其取值如下：

属性值说明
disc实心圆 ●
circle空心圆 ○
square实心方块 ■
<ul type="circle">
      <li>华为</li>
      <li>小米</li>
      <li>苹果</li>
      <li>oppo</li>
      <li>三星</li>
</ul>
自定义列表

自定义列表跟前两种列表有些区别，用 dl 标签表示自定义列表，其中的 dt 是代表列表项，而 dd 是列表项的描述。比如：我们需要对列表项的内容进行解释的时候，就可以使用自定义列表了。

<dl>
  <dt>列表项一</dt>
  <dd>列表项一的描述</dd>
  <dt>列表项二</dt>
  <dd>列表项二的描述</dd>
</dl>

表单标签

在 HTML 文档中，使用 form 标签来进行表单提交。form 标签有两个重要的属性，action 和 method 属性，其中 action 的属性值是表单提交的地址，method 的属性值是提交的方法。

input 标签
文本类表单元素
  <body>
    <form>用户名：<input type="text" /></form>
  </body>
选择类表单元素
<!--单选框-->
<input type="radio" name="选项名" value="提交值" />
<!--复选框-->
<input type="checkbox" name="选项名" value="提交值" />
重置类标签
    <form>
      性别：<input type="radio" name="sex" value="male" />男
      <input type="radio" name="sex" value="female" />女 <br />
      爱好：<input type="checkbox" name="hobby" value="basketball" />篮球
      <input type="checkbox" name="hobby" value="football" />足球<br />
      <input type="reset" />
    </form>
下拉列表

select 有两个常用属性，如下所示：

属性描述
multiple设置下拉列表可以选择多项。
size设置下拉列表选择几个表项。

option 有两个常用属性，如下所示：

属性描述
selected设置是否被选中。
value设置列表项的默认值。
      <p>
        学历：
        <select name="edu">
          <option value="0">初中</option>
          <option value="1">高中</option>
          <option value="2">大专</option>
          <option value="3" selected="selected">本科</option>
          <option value="4">硕士</option>
          <option value="5">博士</option>
          <option value="6">其他</option>
        </select>
        就业城市：
        <select name="city" multiple="multiple">
          <option value="A" selected="selected">北京</option>
          <option value="B">上海</option>
          <option value="C">深圳</option>
          <option value="D">广州</option>
          <option value="E">其他</option>
        </select>
      </p>

HTML新特性

基本语义化标签
  • header 标签是头部区域。
  • nav 标签是导航区域。
  • article 标签是内容区域。
  • section 标签是文档中部分内容区域。
  • aside 标签是侧边内容栏区域。
  • footer 标签是底部信息区域。

在这里插入图片描述

多媒体标签
audio 标签
  • src 属性用于指定要播放的声音文件。
  • controls 是 controls="controls" 简写形式，用于提供播放、暂停和音量控件。

除了上面两种属性，audio 标签还有以下属性可用：

  • autoplay 属性：音频自动播放。

  • loop 属性：音频自动重复播放。

  • preload 属性：用来缓冲 audio 标签的大文件，它有三个属性值 none（不缓冲）、auto（缓冲音频文件）、metadata （缓冲文件的元数据）。

    <audio>
  <source src="filename.opus" />
  <source src="filename.ogg" />
  <source src="filename.mp3" />
</audio>
video 标签

muted 属性视频静音，poster 属性给视频添加封面

  <body>
    <video poster="elena.png" muted  controls>
      <source src="video.mp4" />
    </video>
  </body>
新表单类型
email标签

email 类型用于邮件地址的输入，很明显，它只适用于邮箱输入。

<input type="email / url / search / color" />
url标签

url 类型是专门用来输入网址的。

number标签

number 类型表单有以下属性。

属性描述
max输入框允许的最大值。
min输入框允许的最小值。
step合法的数字间隔，例如 step=2，则合法为：2、4、6、8。
value默认值。
<input type="number" value="5" step="2" />
range标签

range 类型用于包含一定范围内数值的输入。

date标签

date 是用来选取年、月、日的类型。

datetime-local 是用来选取年、月、日和本地时间。

search标签
color标签

color 类型是 input 标签提供的专门用于设置颜色的文本框。通过单击文本框可以打开一个调色板，用户可以在面板中选择需要的颜色。不同的操作系统打开的拾色面板也不相同。

form标签

input 标签新增了一个 form 属性，通过该属性可以将表单元素绑定到指定的 form 标签上，这样就可以灵活进行布局，同时一个表单元素可以从属于多个表单，这就让表单和表单元素的组合变得更加灵活。

  <body>
    <form id="myForm1" action="#" method="GET"></form>
    <form id="myForm2" action="#" method="POST"></form>
    提交到 myForm1：<input type="text" form="myForm1" name="myForm1" />
    <input type="submit" value="提交" form="myForm1" />
    提交到 myForm2：<input type="text" form="myForm2" name="myForm2" />
    <input type="submit" value="提交" form="myForm2" />
  </body>
autofocus标签

打开一个页面，当某个文本框需要获得光标焦点时，可以使用 autofocus 属性来实现。

  <body>
    <form>
      <input type="text" autofocus /> <input type="submit" value="搜索" />
    </form>
  </body>
autocomplete标签

autocomplete 属性是用来规定表单是否应该启用自动完成功能。自动完成功能就是当用户输入一次数据过后，再次输入相同的数据时可以自动补全内容。

<form autocomplete="on / off "></form>
placeholder 标签
  <body>
    <form>
      <input type="text" placeholder="姓名" />
      <input type="text" placeholder="性别" />
    </form>
  </body>

HTML5本地存储

localStorage
localstorage 与 cookie 的区别：
  • localStorage 解决了早期使用 cookie 存储遇到的存储空间不足的问题( 每条 cookie 的存储空间为 4k )；
  • localStorage 一般浏览器支持的是 5M 大小，具体存储大小根据浏览器的不同会有所不同。
  • 并且相较于 cookie 而言，localStorage 中的信息不会被传输到服务器。
方法说明
setItem(key,value)保存数据到本地存储
getItem(key)从本地存储获取数据
removeItem(key)根据指定 key 从本地存储中移除数据
clear()清除所有保存数据
sessionStorage
方法说明
setItem(key,value)保存数据到本地存储
getItem(key)从本地存储获取数据
removeItem(key)根据指定 key 从本地存储中移除数据
clear()清除所有保存数据
区别

虽然使用 localStorage 和 sessionStorage 对象都可以轻松进行数据的存储与取出，但是两者之间也是有区别的，它们的区别在于页面刷新后，对于 sessionStorage 来说，浏览器完全重，而对于 localStorage，数据仍然保留在浏览器中。

localStorage 的生命周期是永久的，除非用户清除 localStorage 信息，否则这些信息将永远存在。

sessionStorage 的生命周期是临时的，一旦当前窗口或标签页被关闭了，那么通过它存储的数据也就被清空了。

CSS 基础语法

选择器
标签选择器

某一类标签统一设定样式时，应该使用标签选择器，标签选择器的关键字以标签的名字命名。

    <style>
      body {
        background-color: deepskyblue;
        color: floralwhite;
      }
      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>学习 Web 前端技术课程</h1>
  </body>
类选择器

在定义类选择器时，需要用点号和类名来定义，而在使用该类选择器时，需要在使用该类选择器的元素标签中，增加 class="类名"的属性（不包括点号），表示该标签使用了指定的类选择器。

在这里插入图片描述

id 选择器

在定义 id 选择器时，需要用 “#” 号和 id 名来定义选择器，而在使用该 id 选择器时，需要在 HTML 标签元素中，增加 id="id 名"的属性（不包括 “#” 号），指定这个 HTML 元素的 id，这个 id 在 HTML 文档中是唯一的

    <style>
      #book {
        color: lightskyblue; !important; // 直接在这里加
      }
    </style>
  </head>
  <body>
    图书分类：
    <ul>
      <li>经典</li>
      <li>文艺</li>
      <li id="book">科幻</li>
      <li>童书</li>
      <li>生活</li>
    </ul>
  </body>
三者优先级

id 选择器 > 类选择器 > 标签选择器； !important 规则时，它会改变样式声明的优先级。

后代选择器

后代选择器是选择标签内部中某一标签的所有元素，其包括子元素及其他后代元素。

    <style>
      #paragraph p {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div id="paragraph">
      <p>这是一个段落</p>
    </div>
  </body>
群组选择器

群组选择器是用于同时对几个选择器进行相同的样式设置。

    <style>
      div,
      span {
        color: lightskyblue;
      }
    </style>
  </head>
  <body>
    <div>段落一</div>
    <span>段落二</span>
  </body>
背景样式
background-color
background-image 和 background-size
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
      }
background-position

通过 background-position 属性，可以改变图像在背景中的位置。

background-repeat

background-repeat 属性是用来设置背景图像是否平铺。

可 取 值描 述
repeat背景图像将在垂直方向和水平方向重复（默认值）
repeat-x背景图像将在水平方向重复
repeat-y背景图像将在垂直方向重复
no-repeat背景图像将仅显示一次
文本属性
属 性可 取 值描 述
line-heightnormal、number、length、%设置行高
text-indentlength、%设置文本缩进
text-alignleft、right、center、justify、start、end设置对齐方式
letter-spacingnormal、length设置字符间距
text-decorationline、color、style、thickness设置文本修饰
white-spacenormal、pre、nowrap、pre-wrap、pre-line、break-spaces规定如何处理空白
line-breakauto、loose、normal、strict、anywhere、unset处理如何断开带有标点符号的文本的行
字体属性
属 性可 取 值描 述
fontfont-style、font-variant、font-weight、font-size（或 line-height）、font-family在一个声明中设置所有的字体属性
font-family字体名称、inherit设置字体类型
font-sizexx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit设置字体大小
font-weightnormal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold）设置字体粗细
font-stylenormal、italic、oblique、inherit设置字体风格
链接中的伪类

在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。

状态效果
a:link普通的、未被访问的链接。
a:hover鼠标指针位于链接的上方。
a:active链接被单击的时刻。
a:visited用户已访问的链接。

针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。

状 态颜 色背 景 色文 本 修 饰
未访问蓝色无无下画线
鼠标移到黑色#DDDDDD下画线
正单击红色#AAAAAA删除线
已访问绿色无无下画线
列表样式
属 性可 取 值描 述
list-stylelist-style-type、list-style-position、list-style-image在一个声明中设置所有的列表属性
list-style-imageURL、none设置图像为列表项标志
list-style-positioninside、outside、inherit设置列表中列表项标志的位置
list-style-typedisc（默认）、circle、square、decimal 等设置列表项标志的类型

盒模型

在这里插入图片描述

区域功能
内容区内容区在模型的中心包含了盒子内的信息也就是 HTML 元素。这些元素可以是文本、图片等。
内边距内边距是内容区和边框之间的空间，可以被看作是内容区的背景区域。
边框边框用于标识盒子的边界，介于内边距和外边距之间。
外边距外边距位于边框外部，是边框与周围之间的空间。
padding

padding 属性是一个复合属性，代表我们盒子模型中的填充，也就是内容区域外部的空白区域。

padding: 上右下左;

padding-top: 顶部填充值;
padding-left: 左边填充值;
padding-right: 右边填充值;
padding-bottom: 底部填充值;
margin

margin 属性是用来设置元素的外边距的。

margin: 上下边距 左右边距;
margin: 上边距 左右边距 下边距;
margin: 上边距 右边距 下边距 左边距;
border

border 属性用于设置元素的边框属性，可以单独设置某条边框的样式

  • border-width：是边框宽度，宽度一般用数值即可。
  • border-style：是边框线的样式，一般有 solid（实线）、dotted（圆点）、dashed（虚线）、double（双横线）。
  • border-color：是边框线的颜色。

display 属性

display 属性可以用来设置元素在页面上的排列方式，也可用来隐藏元素。

属性值说明
block元素以块级方式展示。
inline元素以内联方式展示。
inline-block元素以内联块的方式展示。
none隐藏元素。
block

block 属性值可以让行内元素以块级元素的方式显示在页面上

<style>
    span {
        display: block;
    }
</style>
<body>
    <span>蓝桥</span><span>云课</span>
</body>

可以看到，原本 span 标签是行内元素，却因为设置 display: block; 导致「蓝桥」与「云课」分开了。

inline

inline 属性值可以让像 div 这样的霸道块，接纳其他元素来自己的地盘。

<style>
    div {
        display: inline;
    }
</style> 	 
<body>
    <div>蓝桥</div>
    <div>云课</div>
</body>
inline-block

我们用 a 标签来实现导航的时候，a 标签虽然可以让元素在一行显示，但若我们想给每个 a 标签加上高和宽时发现没有任何效果。这时候用上 display: inline-block，它就具备块的特性了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a {
        text-decoration: none;
        background-color: rgb(95, 118, 160);
        display: inline-block;
        width: 70px;
        height: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">展示</a>
    <a href="#">更多</a>
  </body>
</html>
none

none 属性值可以用来隐藏页面上的元素。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>哈哈，看不见我🤫</div>
  </body>
</html>

浮动与定位

浮动布局比较灵活，不易控制，而定位可以控制元素的过分灵活性，给元素一个具体的空间和精确的位置。

float
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      section {
        border: 1px solid green;
        width: 400px;
        float: left;
      }
      img {
        width: 120px;
        height: 120px;
      }
      img:first-child {
        float: left;
      }
      img:nth-child(2) {
        float: right;
      }
    </style>
  </head>
  <body>
    <section>
      <img src="https://labfile.oss.aliyuncs.com/courses/10532/lotus1.png" />
      <img src="https://labfile.oss.aliyuncs.com/courses/10532/lotus2.png" />
      <p>
        曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
      </p>
    </section>
  </body>
</html>
position

般的标签元素不加任何定位属性时，默认都属于静态定位，静态定位在页面的最底层属于标准流（普通流），在页面中没有特殊的操作方式和显示效果，在本章节中会重点给同学们讲解其他三种定位方式

静态定位（inherit）
相对定位（relative）

相对定位是该元素的位置相对于它原始的位置来计算的。position 属性为我们提供了 relative 属性值来设置元素的相对属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
      }
      .ad-l {
        position: relative;

        left: -40px;
      }
      .ad-r {
        position: relative;

        left: 100px;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>
绝对定位（absolute）

绝对定位，能把元素精确地放在任意位置，使广告照片定位到固定位置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
        margin-left: 180px;
      }
      .ad-l {
        position: absolute;
        left: 50px;
        top: 150px;
      }
      .ad-r {
        position: absolute;
        right: 30px;
        top: 150px;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>
固定定位（fixed）

fixed 属性值用于固定定位，被固定的元素不会随着滚动条的拖动而改变位置。这个就是实现网页内左右悬浮广告的效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100%;
        margin-left: 15%;
      }
      .ad-l {
        position: fixed;
        top: 100px;
        left: 0;
      }
      .ad-r {
        position: fixed;
        top: 100px;
        right: 0;
      }
    </style>
  </head>
  <body>
    <img src="ad-l.png" class="ad-l" />
    <img src="ad-r.png" class="ad-r" />
    <div class="box">
      <img src="box.png" />
    </div>
  </body>
</html>

CSS3 新特性

CSS3 新增选择器
属性选择器

属性选择器就是通过正则的方式去匹配指定属性的元素，为其设置样式。

选择器描述
E[attr^=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 开头的任何字符。
E[attr$=“xx”]选择元素 E，其中 E 元素的 attr 属性是以 xx 结尾的任何字符。
E[attr*=“xx”]选择元素 E，其中 E 元素的 attr 属性是包含 xx 的任何字符。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a[href^="#"] { 匹配 a 标签中 href 属性值以 # 开头的元素。
        color: rgb(179, 255, 0);
      }
      a[href$="org"] { 匹配 a 标签中 href 属性值以 org 结尾的元素。
        color: rgb(195, 0, 255);
      }
      a[href*="un"] { 匹配 a 标签中 href 属性值包含 un 的元素
        background-color: rgb(0, 255, 149);
        color: white;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">本地链接</a></li>
      <li><a href="https://www.lanqiao.cn">蓝桥云课</a></li>
      <li><a href="https://developer.mozilla.org">MDN</a></li>
      <li><a href="https://unsplash.com">Unsplash</a></li>
    </ul>
  </body>
</html>
子元素伪类选择器

子元素伪类选择器就是选择某元素的子元素的一种选择器。

选择器描述
E:first-child选择元素 E 的第一个子元素。
E:last-child选择元素 E 的最后一个子元素。
E:nth-child(n)选择元素 E 的第 n 个子元素，n 有三种取值，数字、odd 和 even。注意第一个子元素的下标是 1。
E:only-child选择元素 E 下唯一的子元素。
E:first-of-type选择父元素下第一个 E 类型的子元素。
E:last-of-type选择父元素下最后一个 E 类型的子元素。
E:nth-of-type(n)选择父元素下第 n 个 E 类型的子元素，n 有三种取值，数字、odd 和 even。
E:only-of-type选择父元素唯一的 E 类型的子元素。
E:nth-last-child(n)选择所有 E 元素倒数的第 n 个子元素。
E:nth-last-of-type(n)选择所有 E 元素倒数的第 n 个为 E 的子元素。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        margin-top: 10px;
        background-color: rgb(0, 255, 242);
      }
      div:nth-child(2) {
        background-color: rgb(0, 255, 128); 给 div 的第 2 个子元素添加绿色背景颜色
      }
      div:nth-of-type(4) { 给父元素下第 4 个 div 子元素添加紫色背景颜色
        background-color: rgb(111, 0, 255);
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>
UI 伪类选择器

UI 伪类选择器是通过元素的状态来选择的一种选择器

选择器描述
:focus给获取焦点的元素设置样式。
::selection给页面中被选中的文本内容设置样式。
:checked给被选中的单选框或者复选框设置样式。
:enabled给可用的表单设置样式。
:disabled给不可用的表单设置样式。
:read-only给只读表单设置样式。
:read-write给可读写的表单元素设置样式。
:valid验证有效。
:invalid验证无效。
/* 页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入不满足要求，背景颜色为红色。*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*格式错误*/
      input:invalid {
        background-color: red;
      }
      /*格式正确*/
      input:valid {
        background-color: green;
      }
    </style>
  </head>
  <body>
    电子邮箱：<input type="email" />
  </body>
</html>
文本阴影

使用 text-shadow 属性来给文本内容添加阴影的效果

text-shadow: x-offset y-offset blur color;
  • x-offset 是沿 x 轴方向的偏移距离，允许负值，必须参数。
  • y-offset 是沿 y 轴方向的偏移距离，允许负值，必须参数。
  • blur 是阴影的模糊程度，可选参数。
  • color 是阴影的颜色，可选参数。
文本溢出

text-overflow 属性可以设置超长文本省略显示

属性值描述
clip修剪文本。
ellipsis显示省略符号来代表被修剪的文本。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border: 1px solid blue;
        width: 100px;
        height: 50px;
        overflow: hidden; /*隐藏超出文本*/
        white-space: nowrap; /*强制单行显示*/
      }
      .poem1 {
        text-overflow: clip;
      }
      .poem2 {
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <p class="poem1">木落雁南度，北风江上寒。我家襄水曲，遥隔楚云端。</p>
    <p class="poem2">乡泪客中尽，孤帆天际看。迷津欲有问，平海夕漫漫。</p>
  </body>
</html>
圆角边框

border-radius 属性来设置圆角边框

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: rgb(17, 61, 117);
        border-radius: 140px 20px 30px 40px; /*四个圆角直径不同*/
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
盒子阴影

box-shadow 属性可以用来设置一个或多个下拉阴影的框

值说明
h-shadow必选，水平阴影的位置，允许负值。
v-shadow必选，垂直阴影的位置，允许负值。
blur可选，模糊距离。
spread可选，阴影的大小。
color可选，阴影的颜色。
inset可选，将外部阴影改为内部阴影。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        text-align: center;
        background-color: green;
        box-shadow: 10px 10px 5px #26ad8c;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
背景属性
background-size
值描述
length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为 auto（自动）。
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置高度。如果只给出一个值，第二个是设置为"auto（自动）" 。
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
background-image background-position background-repeat

在 CSS3 中，background-image 属性的属性值可以包含多个图片的地址。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #content1 {
        /*小图片来自 icons*/
        background-image: url("icons8-rat-96.png"), url("nemuel.jpg");
        background-position: right bottom, left top; /*相对于父元素大小，老鼠图片右下角显示，大背景图片在左上角显示*/
        background-repeat: no-repeat, no-repeat; /*两张图片不重复*/
        padding: 15px;
        width: 400px;
        height: 260px;
      }
    </style>
  </head>
  <body>
    <div id="content1"></div>
  </body>
</html>
渐变属性
线性渐变

线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。

  • side-or-corner 是描述渐变线的起始位置，它包含两个关键词：第一个指出水平位置 left or right，第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • linear-color-stop 是设置渐变的颜色值。
  • color-stop 是由一个 <color> 组成，并且跟随一个可选的终点位置。
background-image: linear-gradient(side-or-corner|angle, linear-color-stop);
background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);重复线性渐变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #linear {
        display: flex;
      }
      /*从上到下线性渐变*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(#ff577f, #c6c9ff);
      }
      /*从左到右线性渐变*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to right, #ff9d72, #c6c9ff);
      }
      /*从左上角到右下角的渐变*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);
      }
      /*定义角度的渐变*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);
      }
    </style>
  </head>
  <body>
    <div id="linear">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>
径向渐变

径向渐变是由元素中间定义的渐变。

  • shape 设置渐变的形状，其取值有 circle（圆形） 和 ellipse（椭圆）。
  • color-stop 设置某个确定位置的颜色值。
  • extent-keyword 是描述边缘轮廓的具体位置，关键字常量如下所示：
  • 在这里插入图片描述
background-image: radial-gradient(shape, color-stop);
background: repeating-radial-gradient(extent-keyword, color-stop);重复径向渐变

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #radial {
        display: flex;
      }
      /*均匀分布径向渐变*/
      .gradient1 {
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);
      }
      /*不均匀渐变*/
      .gradient2 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);
      }
      /*椭圆形渐变*/
      .gradient3 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);
      }
      /*圆形渐变*/
      .gradient4 {
        margin-left: 10px;
        width: 100px;
        height: 100px;
        background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);
      }
    </style>
  </head>
  <body>
    <div id="radial">
      <div class="gradient1"></div>
      <div class="gradient2"></div>
      <div class="gradient3"></div>
      <div class="gradient4"></div>
    </div>
  </body>
</html>
元素转换

transform 是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。

旋转函数（rotate）
transform: rotate(角度);  元素按照指定角度旋转 
transform: rotateX(角度); rotateX 函数可以让指定元素围绕横坐标（X 轴）旋转。
transform: rotateY(角度); rotateY 函数可以让指定元素围绕纵坐标（Y 轴）旋转
移动函数（translate）

translate() 函数能够重新定位元素坐标，该函数包含两个参数值，分别用来定位 X 轴和 Y 轴的新坐标。

transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/
transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/
transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/
缩放函数（scale）

scale() 函数能够缩放元素大小，该函数包含两个参数，分别用来定义宽和高的缩放比例。

transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/
transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/
transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/
过渡属性

CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。

transition-property: 属性值; /*指定属性名*/
transition-duration: 属性值; /*完成过渡这一过程的时间*/
transition-timing-function: 属性值; /*速度曲线*/
transition-delay: 属性值; /*过渡的开始时间*/

transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线，它有很多可用属性值，常用属性值如下表所示。

属性值说明
ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease-in规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
steps(int,start 或者 end)steps() 有两个参数，第一个为步长，其值必须为整数，第二个值为可选值，它有两个取值，分别是 start 和 end。
step-start相当于 steps(1, start)。
step-end相当于 steps(1, end)。
cubic-bezier(n,n,n,n)规定在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
initial规定使用默认值。
inherit规定从父元素继承该属性值。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 50px;
        height: 50px;
        margin: 50px;
        background-color: cornflowerblue;
        transition: transform 4s steps(4);
      }
      div:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
动画

@keyframes 被称为关键帧，它能够设置一些元素的样式，让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示：这里的百分比是用来规定动画发生变化的时间的，0% 代表动画的开始，100% 代表动画的结束，中间的可以自定义。将 @keyframes 创建的动画绑定到选择器上，通过 animation 属性就能实现动画效果了，其语法格式为：

@keyframes 动画名
{
    0% {样式属性：属性值;}
    25% {样式属性：属性值;}
    50% {样式属性：属性值;}
    100% {样式属性：属性值;}
}

animation: 动画名 完成动画的周期 是否重复;
属性描述
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function规定动画的速度曲线。默认是 “ease”。
animation-fill-mode规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-delay规定动画何时开始。默认是 0。
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle {
        width: 60px;
        height: 60px;
        border-radius: 100%;
        background-color: #ffd8a6;
        animation-name: action;
        animation-duration: 9s;
        animation-iteration-count: 10;
      }
      @keyframes action {
        0% {
          margin-left: 400px;
        }
        25% {
          background-color: #dd7631;
        }
        50% {
          border-radius: 10%;
        }
        100% {
          margin: 100px;
        }
      }
    </style>
  </head>
  <body>
    <div class="circle"></div>
  </body>
</html>

CSS3 弹性盒子

弹性盒子就是按照行或者列来布局元素的一种方式，让元素更好地适应不同父容器的大小。

在 CSS3 中给 display 属性增加了新的属性值 flex，如果一个元素被设置 display:flex，说明该元素为弹性布局，也就是个弹性盒子。

在这里插入图片描述

  • main axis 是主轴，该轴的开始为 main start，结束为 main end。
  • cross axis 是交叉轴，该轴的开始为 cross start，结束为 cross end。
  • flex item 是 flex 容器中的元素。
flex-direction

flex-direction 属性指定了弹性子元素在父容器中的排列方向和顺序。

属性值描述
row横向从左到右排列（左对齐），默认的排列方式。
row-reverse反转横向排列（右对齐），从后往前排，最后一项排在最前面。
column纵向排列
column-reverse反转纵向排列，从后往前排，最后一项排在最上面。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .content1 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row; /*默认值，行对齐，主轴起点与终点相同*/
      }
      .content2 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse; /*行对齐，主轴起点与终点相反*/
      }
      .content3 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column; /*列对齐，主轴起点与终点相同*/
      }
      .content4 {
        width: 200px;
        height: 200px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse; /*列对齐，主轴起点与终点相反*/
      }
      .box {
        width: 50px;
        height: 50px;
        color: black;
      }
    </style>
  </head>
  <body>
    <div class="content1">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content2">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content3">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
    <div class="content4">
      <div class="box" style="background-color:#FFE5B9;">A</div>
      <div class="box" style="background-color:#EFF8FF;">B</div>
      <div class="box" style="background-color:#C9CBFF;">C</div>
    </div>
  </body>
</html>
flex-wrap

flex-wrap 属性用于指定弹性盒子的子元素换行方式

属性值描述
nowrap默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
wrap-reverse反转 wrap 排列。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        flex-wrap: wrap-reverse;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>
align-items

align-items 属性是用来设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

属性值描述
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center弹性盒子元素在该行的侧轴（纵轴）上居中放置。
baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与 flex-start 等效。其它情况下，该值将参与基线对齐。
stretch如果指定侧轴大小的属性值为 auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照 min/max-width/height 属性的限制。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        color: black;
      }

      #content {
        width: 240px;
        height: 300px;
        background-color: white;
        display: flex;
        align-items: stretch;
      }
      .item1 {
        background-color: #ffe5b9;
      }
      .item2 {
        background-color: #eff8ff;
      }
      .item3 {
        background-color: #c9cbff;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
    </div>
  </body>
</html>
align-content

align-content 属性可以用于控制多行的对齐方式，如果只有一行则不会起作用

属性值描述
stretch默认。各行将会伸展以占用剩余的空间。
flex-start各行向弹性盒容器的起始位置堆叠。
flex-end各行向弹性盒容器的结束位置堆叠。
center各行向弹性盒容器的中间位置堆叠。
space-between各行在弹性盒容器中平均分布。
space-around各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 60px;
        color: black;
      }
      #content {
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        display: flex;
        flex-wrap: wrap;
        align-content: stretch;
      }
      .left {
        background-color: gray;
      }
      .center {
        background-color: silver;
      }
      .right {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="left">div1块</div>
      <div class="center">div2块</div>
      <div class="right">div3块</div>
      <div class="left">div4块</div>
      <div class="center">div5块</div>
      <div class="right">div6块</div>
      <div class="left">div7块</div>
      <div class="center">div8块</div>
      <div class="right">div9块</div>
      <div class="left">div10块</div>
      <div class="center">div11块</div>
      <div class="right">div12块</div>
    </div>
  </body>
</html>

媒体查询

万有引力_LH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一章. HTML 与 CSS
01-10
第一章. HTML 与 CSS
使用HTML语言和CSS开发商业站点第4章.zip
04-20
通过学习这一章，开发者不仅可以掌握HTML5和CSS3的基础知识，还能了解到如何结合这两者来创建功能丰富、视觉吸引力强且具有良好用户体验的商业网站。这将有助于开发者在当前竞争激烈的Web开发领域中脱颖而出，满足...
input标签的type属性汇总
热门推荐
夏天的博客
04-20 9万+
1.单行输入框< input type=“text”/> 单行文本输入框常用来输入简短的信息，如用户名、账号等，常用的属性有name、value、 maxlength。 2.密码输入框< input type=" password"/> 密码输入框用来输入密码，其内容将以圆点的形式显示。 3.单选按钮< input type=" radio"/> 单选按钮用于单项选择，如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“
【HTML 教程】链接标签
油墨香^-^的博客
06-16 3234
作者 | 阮一峰 链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。 URL 是链接指向的地址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。 1、<a> 链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。 <a href="https://wikipedia.org/">维基百科&lt
学习笔记---web前端
m0_69121090的博客
03-14 1136
定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一系列术语以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签：<dl>标签、<dt>和<dd>标签。<dl> 常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。格式为：
【HTML5Web移动开发】HTML5部分
Cityair的博客
04-29 3304
基本框架： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html> 标题 h1~h6 <h1> 文本 </h1> <h2> 文本 </h2> <h3> 文本 &l
HTML5基础—常用标签（五）超链接
mango_ZZY的博客
08-29 4605
1.超链接基本语法： <a href ="url">链接起点</a> 链接起点一般将文本或者图片标识作为起点：<a href ="url">文字</a> 或者 <a href ="url"><img src="图片路径" /></a> <a href=#>链接文本</a> 定义了...
使用HTML语言和CSS开发商业站点第3章.zip
04-20
在本压缩包“使用HTML语言和CSS开发商业站点第3章.zip”中，重点涵盖了HTML5和CSS3这两个核心技术在构建现代商业网站时的应用。原创作者田超凡为我们提供了深入浅出的讲解，旨在帮助读者掌握这两门语言的精髓，以便...
使用HTML语言和CSS开发商业站点第1章.zip
04-20
"使用HTML语言和CSS开发商业站点第1章.zip"这个压缩包文件包含了第一章节的学习资料，可能包括课件、示例代码和练习，旨在帮助初学者或有一定基础的学习者提升构建专业网站的能力。 首先，HTML5是HTML的最新版本，...
使用HTML语言和CSS开发商业站点第5章.zip
04-20
在本压缩包“使用HTML语言和CSS开发商业站点第5章.zip”中，重点内容聚焦于使用HTML5和CSS3技术来构建商业级别的网站。HTML5是第五代超文本标记语言，而CSS3则是层叠样式表的最新版本，两者结合能够创建功能丰富、...
html/css基本使用
一页漂洋过海
08-10 442
组件(html) 第一部分 1.段落 2.标题 3.粗体字 4.斜体字 5.没有语义，作用是为了设置单独样式 6.引号（短文本引用） 7在我看来类似于段落标签（长文本引用） 8.换行 9.&nbsp空格 10.水平横线 11.加入单行代码（用于编程技术类网站） 12.加入多行代码（用于编程技术类网站） 第二部分 1.无序新闻标签 ul> li>item名称l
div+css
Star_kang的博客
07-31 187
一；页面布局 1， Div 盒子 盒子模型，定义页面布局的一块区域范围 块级标签 与table表格布局：整齐规则，需要行和列组成，布局死板 2， CSS a) 内联样式，行内样式，写在标签内，通过style属性定义样式 b) 内部样式： 写在标签中，需要样式选择器，选择body中的标签 样式选择器类型 A， 通配符选择器，定义页面中的所有标签 *表示所有标签 *{ ...
HTML的标签与选择器
weixin_49689284的博客
08-11 1568
div和span标签 语法： <div>.....</div> 效果：换行 <span>....</span> 效果：无 注意： 1，div由于只有换行效果所以无需修改默认样式就能将内容块级化（独占一行）。所以div又称为块级标签/块级元素。其他块级标签有：h1~h6，p，blockquote…【它们都能独占一行】 2，span没有效果，所以内容没有块级化（不会独占一行），所以span又称为行内标签/行内元素/内联元素。其他行内标签：font，a… 3,一般
类选择器(CSS选择器）
dongbo2355的博客
08-23 436
类选择器以（.）为前缀，后面为类名。 在标签中定义class属性，然后设置属性值为类名选择器。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text...
css（外部样式表）中各种选择器（定义属性时）的优先级
weixin_30292843的博客
10-09 209
今天在学css的时候遇到一个问题，用css的外部样式表改变一个<p>元素的颜色，死活就是改变不了，最后才发现是优先级的问题（我自己想当然成后面的优先级就高了，犯了经验主义错误）。 先给大家看看代码：html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="...
使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性
木子李的博客
12-14 1万+
使用js创建div、添加子div并给div设置在css中定义的class选择属性以及设置style属性     var parentDiv = document.createElement("div");//创建父div parentDiv.className="CssStyle1";//给父div设置class属性 parentDiv.style.clear="both";//给父div的st
CSS一个元素同时使用多个类选择器（class selector）
weixin_33982670的博客
12-08 3559
CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到（样式复用），通常div的class中由好几段组成，如&lt;div class="user login"&gt;能被.user和.login两个选择器选中。如果这两个选择器中有相同的属性值，则该属性值先被改为.user中的值，再被改为.login中的值，即重复的属性以...
CSS 五大选择器 （特别是多类选择器、属性选择器有眼前一亮的感觉）
ganlian666的专栏
03-04 716
1、元素选择器 最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。 例如： html {background-color: black;} p {font-size: 30px; backgroud-color: gray;} h2 {background-color: red;} 以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。
HTML 基础结构
最新发布
m0_74012211的博客
08-03 457
HTML 基础结构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值