HTML+CSS基础知识

苏格兰的花贩

已于 2022-05-25 09:25:26 修改

阅读量198

点赞数

文章标签： css html

于 2022-05-23 08:21:31 首次发布

本文链接：https://blog.csdn.net/mming9527/article/details/124870955

版权

HTML

HTML：超文本标记语言

<!--HTML5-->
<!doctype html>

<html>
    <head>
        <title></title>
        <meta charset="utf-8">

    </head>
    <body>
        网页主题内容
    </body>
</html>

body中常用标签

标题标签：

<h1></h1>(h1~h6)

段落标签：

<p></p>

普通文本:

<span>行区分标签，用于对特殊文本特殊处理</span>

<br>换行

<hr>加分割线

字符实体：

使用 < 在页面中呈现 "<"
使用 > 在页面中呈现 ">"
使用   在页面中呈现一个空格
使用 © 在页面中呈现版权符号"©"
使用 ¥ 在页面中呈现人民币符号"￥"

容器标签：

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

图片与超链接：

title 用于设置图片标题

alt用于设置图片加载失败后的文本

_self:当前窗口打开

_blank:新窗口打开

列表标签：

有序列表

无序列表:

表格标签：

<table>

<tr><td></td></tr>.

</table>

单元格合并：

colspan:跨列合并

rowspan:跨行合并

表单标签：

action:提交地址 method:数据提交方式，默认get，可以post ；enctype：数据提交类型

<input type="text">文本框

<input type="password">密码框

<input type="radio">单选按钮

<input type="checkbox">复选框

<input type="flie">文件上传

<input type="button">普通按钮

<input type="submit">提交按钮

<select></select> 下拉菜单
<option></option> 下拉菜单选项
<textarea></textarea> 文本域

CSS基础使用

css:Cascading Style Sheets 层叠样式表与HTML相辅相成

1.行内样式

<标签名 style="样式声明">

2.内嵌样式

<style>
    选择器{
        属性:值；
        属性:值；
    };
</style>

3.外链表样式

<link rel="stylesheet" href="URL" type="text/css">

样式表特征

1.层叠性

2.继承性

3.样式表的优先级

行内样式>内嵌与外链表样式>浏览器默认样式和继承样式

CSS选择器

1.标签选择器

根据标签名匹配文档中所有该元素

标签名{
    属性:值;
}

2.id选择器

根据元素的id属性值匹配文档中唯一的元素，id具有唯一性，不能重复使用

#id属性值{
}

3.class选择器/类选择器

.class属性值{
}

特殊用法:

1.注意标签与类选择器结合时，标签在前，类选择器在后

a.c1{}

2.class属性值可以写多个，共同应用类选择器的样式.

4.群组选择器

为一组元素统一设置样式

selector1,selector2,selector3{

}

5.后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)

selector1 selector2{
}

匹配selector中所有满足selector2的后代元素

6.子代选择器

匹配满足选择器的所有直接子元素

selector1>selector2{
}

7.伪类选择器

为元素的不同状态分别设置样式，必须与基础选择器结合使用


:link    超链接访问前的状态
:visited 超链接访问后的状态
:hover   鼠标滑过时的状态
:active  鼠标点按不抬起时的状态(激活)
:focus   焦点状态(文本框被编辑时就称为获取焦点)

使用:

a:link{
}
a:visited{
}
.c1:hover{ }

注意：超链接如果需要为四种状态分别设置样式，必须按照以下顺序书写

 :link
 :visited
 :hover
 :active

3.选择器的优先级

使用选择器为元素设置样式，发生样式冲突时主要看选择器的权重，权重越，优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

/*群组选择器之间互相独立，不影响优先级*/
body,h1,p{ /*标签选择器权重为 1 */
 color:red;
}
.c1 a{ /*当前组合选择器权重为 10+1  */
 color:green;
}
#d1>.c2{ /*当前组合选择器权重为 100+10 */
 color:blue;
}

五、标签分类

1.块元素

独占一行，不与元素共行；可以手动设置宽高，默认宽度与父元素保持一致

例:body div h1~h6 p ul ol li form table

2.行内元素

可以与其他元素共行显示；不能手动设置宽高，尺寸由内容决定

例:span label b strong i s u sub sup a

3.行内块元素

可以与其他元素共行显示，又能手动调整宽高：

例:img input button(表单控件)

4.嵌套原则

1.块元素中可以嵌套任意类型的元素

p元素除外，段落标签只能嵌套行内元素，不能嵌套块元素

2.行内元素中最好只嵌套行内或行内块元素

六、尺寸单位

px 像素单位

%百分比，参照父元素对应属性的值进行计算

em字体尺寸单位，参照父元素的字体大小计算,1em=16px

rem字体字体尺寸单位，参照根元素的字体大小计算，1rem=16px

七、颜色单位

英文单词：red，green，blue

rgb(r,g,b) 使用三原色表示，每种颜色取值0~255

rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）

十六进制表示：以#为前缀，分为长十六进制和短十六进制。

长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f
例：red rgb(255,0,0) #ff0000
短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
例：#000 #fff #f00

八、常用CSS样式参考

功能	属性名	取值
宽度	width	尺寸单位，行内元素无效
高度	height	尺寸单位，行内元素无效
背景颜色	background-color	颜色单位
背景图片	background-image	url("路径")
字体大小	font-size	尺寸单位
字体粗细程度	font-weight	normal/bold(加粗)
字体样式	font-style	normal/italic(倾斜)
字体名称	font-family	字体名称，如Arial,"黑体"
文本颜色	color	颜色单位
文本装饰线	text-decoration	none/underline(下划线)
文本内容的水平对齐方式	text-align	left(默认值)/center/right/justify(两端对齐)
行高(文本内容垂直对齐)	line-height	尺寸单位,line-height = height 设置一行文本在元素中垂直居中,line-height > height 文本下移显示,line-height < height 文本靠上显示
边框	border	三个值，分别为宽度/样式/颜色，用空格隔开，如 1px solid red(1像素实线边框)
单边框	border-top/right/bottom/left	同上
圆角边框	border-radius	像素值或百分比，50%为圆形，最多取4个值，按照顺序分别表示左上、右上、右下、左下，如果没有值时和对角一致
内边距	padding	常用像素值，调整元素内容与边框之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离，最小值为0
单方向内边距	padding-top/right/bottom/left	取一个值
外边距	margin	调整元素与元素之间的距离，最多取4个值，按照顺序分别表示上右下左四个方向的距离
单方向外边距	margin-top/right/bottom/left	取一个值
修改鼠标指针样式	cursor	pointer光标呈现为指示链接的指针
过渡效果	transition	取多个值，包含设置过渡效果的 CSS 属性的名称，完成过渡效果需要多少秒或毫秒，速度效果的速度曲线等，如width 2s linear

将底边边框设置透明
border-bottom-color:transparent;
border-bottom-color:rgba(0,0,0,0);

overflow:主要用于设置盒子属性，规定当内容溢出元素框时发生的事情
1.overflow：visible 
默认值，内容不会被修剪，会呈现在元素框之外。
2.overflow：hidden
内容会被修剪，并且其余内容是不可见的。
3.overflow:scroll
内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
4.overflow:auto
如果内容被修剪，则浏览器会显示滚动条以便查看其余内容。
5.overflow:inherit
规定应该从父元素集成overflow属性的值。

一般情况下只写宽度不写高度

border:边框

border-right:单边框设置

三角边框设置

div{
			color:#666;
			
			}
		span{
			display:inline-block;
			width:0;
			height:0;
			border:6px solid transparent;
			border-top-color:#000;
			}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      width: 120px;
      height: 44px;
      color: rgb(255, 255, 152);
      background-color: rgb(34, 34, 34);
      text-align: center;
      line-height: 44px;
      border-radius: 22px;
      font-family: '黑体';
      font-size: 1.1em;
    }
    div:hover{
      cursor: pointer;
      background-color: #ff3d3d;
      color: #fff;
    }
  </style>
</head>
<body>
  <div>PLUS会员</div>
</body>
</html>

百度一下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      width: 108px;
      height: 44px;
      color: #fff;
      background-color: #4e6ef2;
      text-align: center;
      line-height: 44px;
      border-radius: 0 8px 8px 0;
    }
    div:hover{
      background-color: #4662d9;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 字体颜色白色  背景颜色#4e6ef2 设置宽度108px 高度44px  设置字体水平居中 设置字体行高44px(垂直居中) -->
  <!-- 鼠标移入时 背景颜色变成#4662d9 鼠标指针变成小手 -->
  <div>百度一下</div>
</body>
</html>

布局方式

写顺序及标签类型从上到下，从左到右依次显示

浮动布局：属性：float：left/right;

块不会独占一行，设置过float的标签没有默认位置

不让其他div与浮动重叠

CSS清除浮动的3种方法

方法1：

#test{clear:both;}

#test为浮动元素的下一个兄弟元素

方法2：

#test{display:block;zoom:1;overflow:hidden;}

#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height

方法3：

#test{zoom:1;}

#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}

#test为浮动元素的父元素

定位属性：position

取值：relative(相对定位)/absolute(绝对定位)/fixed(固定定位)/static(严格定位按照浏览器定位)

偏移属性:top right bottom left

relative:设置相对定位参照物元素在页面中原始位置原始位置会一直被保留

所以如果要大范围移动元素时会在页面中留下空白

div{
      position: relative;
      /* 设置好定位方式后 需要设置偏移属性元素的位置才会改变 */
      /* 距离 元素在页面中原始位置左侧100px */
      left: 500px;
      top: 500px;
      background-color: #f00;
    }

absolute:绝对定位参照离他最近的已经定位的祖先元素

一般使用的时候配合相对定位一起使用

z-index只对定位元素起作用。如果你尝试对非定位元素设定一个z-index值，那么肯定不起作用。z-index值能创建堆栈上下文环境，并且突然发现看似简单的东西变的更加复杂了。

z-index:1;可以让该标签在最上层无单位的数值，数值越大越靠上；

苏格兰的花贩

关注

0
点赞
踩
0

收藏

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

HTMLHTML：超文本标记语言<!doctype html><html> <head> <title></title> <meta charset="utf-8"> </head> <body> 网页主题内容 </body></html>body中常
复制链接

扫一扫