HTML+CSS

最新推荐文章于 2024-07-16 15:41:31 发布

凤月惠子

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量346

点赞数

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/qq_38103462/article/details/78324537

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html：

html 叫做超文本标记语言，是使用标签来进行内容的标记，每一个标签都有自己特殊的意义
文本：普通的文字，html就是普通文本
超文本：由尖括号和特定的文本组成的，如<html>这是超文本，超文本不会显示在页面中
html是文本语言：是由符号和文本组成，里面不能含有图片等内容，html文件的运行环境是 — 浏览器。

标签
标签是由尖括号和特定的文本组成的
特定文本叫做标签名
例如 :

<p>这是p标签
标签的分类：
开始标签：<开始标签>
结束标签：</结束标签>
自闭合标签【空标签】 :<自闭合标签 />可以省略”/”

标签属性
写在开始标签或空标签的标签名后面，用空格隔开，一个标签可以有多个标签属性，例如：
<p style="color:red;">，
<img align="center" width="100" />
标签属性：是由键值对组成的，有属性名和属性值，属性名和属性值之间用等号连接，属性值用引号包裹，多个标签属性之间用空格隔开

标签属性之alt和title的区别
- alt 应用正在img标签中，如果图片加载出现问题，alt中的文字就会显示在该图片位置上
- title任何元素都可以使用，鼠标放置在这个元素上的时候，会出现一个跟随鼠标的文本框，title中的文字就会在这个文本框中

元素
由标签和内容组成的，例如：
<p>我是一个段落标签，里面放着一段文字</p> p元素

元素可以内容为空
<p></p> p元素
空标签也是元素
<img /> img元素
元素的嵌套
有开始标签和结束标签组成的元素是可嵌套的元素
1.<div> 2.<p> 3.<img /> 4. </p> 5. <img /> 6.</div>
空标签不能进行嵌套
1.<img />

html中常用的元素以及元素的分类

html根元素
1、块级元素：独占一行

标签名	描述
div	是一个无意义的标签，一般用来进行结构的划分
ul	无序列表
ol	有序列表
li	列表项
dl	定义列表
dt	定义名称
dd	定义描述
p	段落
hr	分割线
form	表单 input
h1-h6	标题（文章专题栏目）
table	表格 tr th td

格式重点：
(1)、ul和ol元素中第一层级嵌套的元素永远是li标签
(2)、dl中第一层级嵌套的元素只能是dt和dd
(3)、p标签中不能嵌套自己或者其他块级元素

2、行内元素（内联元素）：在一行显示

标签名	描述
span	无意义标签，进行小结构的描述
b	文本加粗
strong	文本加粗语气强调（是浏览器识别的)
i	文本斜体
em	文本斜体语气强调（是浏览器识别的）
br	强制换行
sub	下标
sup	上标
font	已经弃用字体
s	弃用中划线
strike	中划线
del	删除线
u	下划线
img	引入图片
input	表单框
a	锚

a的四种状态合一

a{/*只写一个a代表了a的四种状态*/
    text-decoration:none;/*去掉a元素四种状态下的下划线*/
}
a:link{} 向未访问的链接添加特殊的样式
a:active{} 设置当你点击链接时的样式
a：visitsd{} 设置访问过的页面链接的样式
a:hover{}  当有鼠标悬停在其上的链接样式

行内元素基本上都是进行文字控制的元素，不会进行结构的划分

HTML的结构
1、


写法：
  <p style="width:100px;height:100px;background-colol:red;"></p>

(html中文字字号不设置的时候，默认字体大小为16像素在“px”是像素的单位)

属性名	描述	属性值
width	宽度	数值(length) px em rem
height	高度	数值(length) px em rem
background-color	背景颜色	英文单词十六进制色值 rgb
float	浮动	left right none inherit(继承父级属性值)
line-height	行高	数值(length) px em rem
font-size	字号大小	数值(length) px em rem
color	文字颜色	英文单词十六进制色值 rgb
text-align	水平居中方式	left right center
border-color	边框颜色	英文单词十六进制色值 rgb
border-style	边框样式	solid(实线) dashed(虚线) dotted(点状线) double(双实线)

- （2）、内嵌式：将css代码写在<style></style>元素中，这个元素一般放在<head></head>元素中
在工作之不常用
？ {页面内容少，并且每一个页面的样式都不同
只要选择器名称相同，这些元素就可以使用同一的样式}

写法：
     <head>
           <style>
             选择器{声明；声明；声明；}
             p{width:100px;height:100px;100px;background-color:red;}
          </style> 
     </head>
     <!--
     选择器：是用来选择要操作的元素
     声明：是css样式，由属性名和属性值组成
     -->
     <body>
           <p></p>
     </body>

复制行将光标随意点击这一行的某个位置点击ctrl+D
- （3）、外联式：html文件和css文件都是独立的文件，通过link标签将css文件引入html文件

写法：
<head>
<link rel="stylesheet" href="url" type="text/css"/>
/*
rel="stylesheet" 指定html和所引入href指定文件之间的关系，如果不写本语句不生效
href="url" 指定引入路径
*/
</head>

导入式：html文件和css文件都是独立的文件，通过@import这条语句引入到html文件中
- @import既不是标签也不是css属性
- @import必须写在css样式表中
- @import必须写在所有样式之前

<head>
<style>
import 文件路径；
p{}
</style>
</head>

导入式和外联式的区别【link和import的区别】
link和@import虽然都是引入外部的css文件，但是他们是由天差地别的区别的
- link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中。
- 他们的加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载。
- 当使用javascript控制DOM去改变css样式的时候，只有使用link标签，因为import不能被DOM控制的。
多重样式优先级
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
css的基本语法
1、组成
css基本语法：由两部分组成，选择器和声明（声明可以有一到多条）
选择器： 是连接元素和样式表的一个通道，可以批量选择当前文档下的相同名称的元素。
声明：就是css属性，由属性名和属性值组成，放在一个{}中，属性名和属性值之间用冒号连接，每一个声明之间用分号隔开

写法：
选择器{声明；声明；}
p{color:red;fond-size:14px;}

2、选择器的分类

选择器权重比较【选择器的优先级】
css属性名相同，属性值不同的时候，需要比较选择器的权重，谁的权重大，谁就生效，如果选择器权重相同，那么哪个一个选择器离元素近，就听谁的（就近原则）。

（1）、基本选择器
- 标签选择器：直接使用标签名当做选择器，可以选择当前所有叫做这个标签名的元素
权重—-1

类选择器：使用标签属性class的属性值为选择器，属性值前需要加上一个点
权重—-10
一个元素的类名可以有多个，每个类名之间用空格隔开

  写法：
 <style>
 div{}       /*标签选择器*/
 .box{}    /*类选择器*/
 </syle>
 <div class="box">1</div>
 <div>2</div>

id选择器:使用标签属性id的属性为选择器，在属性值前需要加一个#（井号）
ps:一个文件id名称只能有一个
权重—-100

 <style>
 div{}       /*标签选择器*/
 #box{}    /*id 选择器*/
 </style>
 <div id="box">1</div>
 <div id="box">错误的  box已经存在，本处不能在使用box作为属性值</div>

说明:标签选择器相当于人的姓，类相当于人的名，id选择器相当于人的身份证号码
- 通配符选择器：选择所有元素（从html元素开始，包含的所有元素）
权重小于1
写法：

*{}

以上写法

  <style>
  tagnme{1}
  .className{10}
  #idName{100}
 *{0.1}
 </style>

（2）、其他选择器

分组选择器【并集选择器】：让不同的元素使用同一个{}中的声明每一个选择器之间用逗号隔开，这些选择器代表的元素共同使用一个{}内的声明。
分组选择器是由不同的选择器组成，每个选择器之间用逗号隔开，每一个选择器都是独立的个体，权重都是单独计算的

<style>
1、.box li,.list>.link,#tab{}
2、div,p,h2{width:100px;height:100px;background-color:red;}
</style>
<div></div>
<p></p>
<h2></h2>

派生选择器（后代选择器）：前后辈关系（嵌套）
格式：选择器（祖辈）选择器（要操作的子元素）{}
祖辈选择器和子选择器用空格连接
不用将每一层级的选择器都写出来，只要写出关键作用节点的选择器即可
权重：所有组成选择器之和

    <style>
 li{width:100px;height:100px;background-color:red;}
     1.div ul li{}
      2.div li{}
       3.ul li{}
     <div>
        <ul>
        <li></li>
       </ul>
    </div>

   <ul>
      <li></li>
   </ul>

.box li p{}
/*
先找到当前文档下所有的p标签，再去找p标签的父辈元素哪一个是li，再去找这个li上面类名叫做box的元素
*/

标签属性选择器
权重： 10

写法：
<style>
[title]{width: 100px;height: 100px;border-width: 1px;border-style:solid;border-color:red;}
[type=text]{border-color:yellow;}
[type=submit]{border-color:red;}
</style>
<div title="文字描述">100*100 边框1px 实现的 颜色红色</div>
<div>222222</div>
<input type="text">
<input type="submit">

交集选择器：两种属性同属一个元素的时候，将两种书写在一起，可以精确的查找到想要选择的元素
特点：将同一元素的不同属性结合在一起就是交集选择器，交集选择器连接什么符号
权重：选择器权重之和

<code>
写法：
1、<style>
p.act1{}/*11*/
.act1p{}/*一个元素类名叫做class="act1p"*/
p.act2{}/*11*/
.act1.act2{}/*20*/
p#act{}/*101/
</style>
<p class="act1 act2" id="act"></p>
2、input[type=text]
<input type="text"/><input type>
</code>

相邻兄弟选择器：通过+连接两个选择器，前面的选择器是兄，后面的选择器是紧邻的第一个选择器
权重：选择器权重之和

写法
<style>
p+span{font-size:30px;}
</style>
<p></p>
<span>111 font-size:30px;</span>
<span>2</span>
<span>3</span>

子级选择器：父级选择器>紧邻子级选择器
父子必须是相邻关系
权重：所有选择器权重之和

写法
<style>
div>ul>li{}
</style>
<div>
    <ul>
        <li>边框虚线
            <ul>
                <li>边框实线</li>
            </ul>
        </li>
    </ul>
</div>

伪类选择器
伪类用于向某些选择器添加特殊的效果
权重：—-大于10小于11

写法：
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

伪元素向一个html元素中通过css添加一个html不存在的元素
通过css向html结构中，输出假元素

写法

1、
<style>
p:after{
    display:block;
    content:"我是那个不存在的元素";
}
</style>
<p></p>
2、<style>
p:after{
    display:block;
    content:"我是那个不存在的元素";
}
</style>

/提问/
1.选择器的查找方式？
是从后向前（从右向左）
2.后代选择器写几个合适？
后代选择器尽量不要超过3个
样式的层级，样式冲突
- 样式的层级：一个是权重，另一个就是共用样式和私用样式了
- 冲突的来源： css层叠样式表对同一个标签具有多种定义方法，而每种方法的影响范围（顺序、具体性）却有权重之分。
- 解决冲突:继承与层叠
- 继承：某个属性从父元素传递到子元素的机制；意义是不用每个元素指定的属性，简化了代码，若不需要继承属性，覆盖即可。除了<html>(根元素)都有继承属性，因为只要它无父元素。可继承属性（如下）
- 层叠：当多个冲突和层叠的CSS声明应用在同一元素时，用来控制应用CSS声明的顺序
- 重要性，若声明具有一样的重要性【也就是权重】，则计算特殊性【组合选择符】
- 特殊性，若声明具有一样的特殊性，则考虑源顺序（后面的声明覆盖前面的）

css优先级顺序

下列是一份优先级逐级增加的选择器列表：通用选择器（*）<元素(类型)选择器<类选择器<属性选择器<伪类

background-color：#f f6600
background-color:rgb(255,255,255)白色
background-color:rgb(0,0,0)黑色
background-color：ragb(0，0，0，0.2)
a是指透明度 范围0-1

background-image
指定要使用一个或多个背景图像，默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
url 图像的url
none无图像背景会显示。这是默认
inherit 指定背景图像应该从父元素继承
引入背景图片

background-image：url("bg.jpg")

可以引入多张图片，先引入的图片会覆盖在后引入图片的上面

background-image：url("bg.jpg"),url("logo.jpg")

ie8以下浏览器不支持

background-repeat:no-repeat；
指定如何重复背景图像，默认情况下，重复background-image的垂直和水平方向
背景图片平铺
repeat 背景图像将向垂直和水平方向重复。这是默认
如果不写默认是repeat平铺
no-repeat 不进行平铺
repeat-x x轴平铺只是水平位置会重复背景图像
repeat-y y轴平铺只是垂直位置会重复背景图像
inherit 指定background-repeat属性设置应该从父元素继承
可以控制多个图片的平铺的方法

background-repeat：no-repeat，repeat；

引入多个图片的方法，ie低版本浏览器不支持

background-position：10px 30px；
设置背景图像的起始位置
背景图片的定位
注意对于这个工作在Firefox和Opera，background-attachment必须设置为“fixed（固定定位）”
top bottom left right center 可以两两组合，如果仅指定一个关键字，其他值将会是“center”
支持数值
第一个值是X轴从左到右
第二个值是Y轴从上道下
inherit 指定background-position属性设置应该从父元素继承

background-position:center center;盒子的中心与图片的中心重合

background-size：247px 440px [css3]
背景图片的大小
第一个值是指宽度
第二个值是指高度
cover此时会保持图像的纵横比并将图像缩放成将完成覆盖背景定位区域的最小大小
contain此时会保持图像的纵横比并将图像缩放成将合适背景定位区域的最大大小。

background-origin [css3]

padding-box 背景图像填充框的相对位置从padding区域（含padding）开始显示背景图像
border-box 背景图像边界框的相对位置从border区域（含border）开始显示背景图像
content-box 背景图像的相对位置的内容框从content区域（含content）开始显示背景图像
ie低版本浏览器不支持

background：linear-gradient(to bottom,#ffffff,#ff6700);线性渐变

background-clip[css3]
指定背景图像的绘画区域
指定对象的背景图像向外裁剪的区域
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。

background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
fixed：背景图像相对于窗体固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。
inherit 指定background-attachment的设置应该从父元素继承

background-blend-mode [不支持ie浏览器]
该属性定义了背景层的混合模式（图片与颜色）。

属性	描述
normal	默认值。设置正常的混合模式。
multiply	正片叠底模式。
screen	滤色模式。
overlay	叠加模式。
darken	变暗模式。
lighten	变亮模式。
saturation	饱和度模式。
color	颜色模式。
luminosity	亮度模式。
color-dodge	颜色减淡模式。

雪碧图
多个小图片放在一个大的透明图片文件中，调取时，统一调取这张图片，按照图片位置的定位来展现其中一部分
减少http请求，优化代码

凤月惠子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS

html： html 叫做超文本标记语言，是使用标签来进行内容的标记，每一个标签都有自己特殊的意义文本：普通的文字，html就是普通文本超文本：由尖括号和特定的文本组成的，如<html>这是超文本，超文本不会显示在页面中html是文本语言：是由符号和文本组成，里面不能含有图片等内容，html文件的运行环境是 — 浏览器。标签标签是由尖括号和特定的文本组成的特定文本叫做标签名例如
复制链接

扫一扫