HTML与CSS的使用与总结

最新推荐文章于 2024-07-10 14:03:37 发布

稳小情

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量312

点赞数

分类专栏：前端案例文章标签：稳小情 it 前端

本文链接：https://blog.csdn.net/weixin_45728087/article/details/102831720

版权

前端案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
层叠样式表(英文全称：Cascading Style
Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进

网页基本结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>标题</title>
	</head>
<body>
</body>
</html>

charset=utf-8 表示当前文档的字符集是采用utf-8的字符，也就是我们常说英文字符集; charset 字符集国内常用的有：
uft-8 是Unicode的其中一个使用方式。 UTF是 Unicode Translation Format，
即把Unicode转做某种格式的意思。 gbk gb2312 主要用于中文。 big5 用于繁体中文

html标签有：

img src=“链接目录” alt=“图片无法加载所显示的文字” title=“图片悬浮显示的文字”/
h1-h6为标题标签，h1到h6分别为一级标题到六级标题。结构为h1 /h1它是一对标签
a href=“链接” /a填写目录跳转到所填写的目录位置。
em /em让文字达到倾斜效果
br/为换行标签可以达到换行效果
hr/为水平线标签，可实现下面一条水平线。
p /p为段落标签，行内元素独占一行，可以实现段落效果，达成一段一段的段落。
header /header为顶部的意思，意思为头部，标头的标签。

初识CSS。
CSS基本语法结构：
css最后一条声明“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条生命结束"；"都要写上。
引用css样式为：行内样式、内部样式、外部样式。
就近原则：行内样式>内部样式>外部样式。
css的样式：

属性	解释
width	宽，设置标签的宽图片的宽等等
height	高，设置标签的高图片的高等等
margin	简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值
padding	简写属性在一个声明中设置所有内边距属性
font	属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体
background	简写属性在一个声明中设置所有的背景属性
border	简写属性在一个声明设置所有的边框属性
float	属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素
color	属性规定文本的颜色

<link href="目录" rel="stylesheet" type="text/css"/>注：英文输写，写入到html文件里面的head里面，别用中文输入法输入标点符号，否则无效。

选择器	解释
标签选择器	标签选择器直接应用于html标签上面
ID选择器	id选择器一个页面只能使用一次
类选择器	类选择器可以在页面中多次使用

优先级选择器：ID选择器>类选择器>标签选择器
标签选择器不遵循就近原则。
无论哪种方式引用css样式，一般都遵循：id选择器>class类选择器>标签选择器的优先级

高级选择器：

层次选择器
结构伪类选择器
属性选择器

层次选择器：

选择器	作用
E F	后代选择器(选择匹配的F元素，且匹配的F元素被包括在匹配的E元素内)
E>F	E>F子选择器（选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素）
E+F	相邻兄弟选择器（选择匹配的F元素，且匹配的F元素仅位于匹配的）
E~F	通用选择器（选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素）

结构伪类选择器：

选择器	使用方法
E:first_child	(作为父元素的第一格子元素的元素E)
E:last-child	(作为父元素的最后一个子元素的元素E)
E F:nth-child(n)	(选择父级元素E的第n个子元素F,n可以是1、2、3.关键词为even、odd）
E：first-of-type	（选择符元素内具有指定类型的第一个E元素）
E:last-of-type	（选择父元素内具有指定类型的最后一个E元素）
E F:nth-of-type(n)	（选择父元素内具有指定类型的第n个F元素）

属性选择器：

选择器	如何用
E[attr]	选择匹配具有属性attr的E元素
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr其属性值包含了“val”，换句话说，字符串val 与属性值中的任意位置相匹配
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr其属性以val结尾的任意字符串
E[attr∧val]	选择匹配元素E，且E元素定义了属性attr其属性值是以val开头的任意字符串
E[attr=val]	选择匹配具有属性attr的E元素，并且属性为val（其中val区分大小写）

font属性与值：

font-size:14px;(个人理解这个是css里面设置字体的大小的样式)
font-family：微软雅黑;（设置所使用的字体）
font-wiight：900；（数字调整，与bold粗体、bolder更粗字体、lighter更细字体）

vertical-align：midde（图片垂直居中）

color属性

RGB：十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
rgb（r，g，b）：正整数的取值为0~255.
RGBA：
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道为0~1;
color:#FFF color:rgb{0,255,0)；

text属性：

属性	作用
text-justify	实现两端对齐文本效果
text-align	设置元素水平对齐方式常用：left、right、center
text-indent	设置首行文本的缩进。如：text-indent：2px。单位可以是em或px
text-decoration	文本装饰值：overline（上划线）underline（下划线）line-through（水平删除线） none（去除下划线）。
text-shadow	（文字阴影效果）值：color（颜色）x（X轴）Y（y轴）0（模糊半径）
排序	字体风格→字体粗细→字体大小→字体类型

伪类名称：

属性	作用
a：link	未单击访问时超链接显示的样式
a：visited	单机访问后超链接样式
a:hover	鼠标悬浮其上的超链接样式
a：active	鼠标单击未释放的超链接样式
伪类优先顺序	link>visited>hover>actire

列表样式
list-style-type：

属性	作用
none	无标记符号
disc	实心圆
circle	空心圆
square	实心正方形
decimal	数字

背景属性：

background：color（背景颜色）
background-image（背景图像） background：url（图片路径）。
background属性：background：#ccc url（背景图像目录）205px 10px no-repeat
分别为：背景颜色、背景图像、背景定位、背景不重复显示。

背景重复方式：

background-repeat属性：

no-repeat（不平铺，即只显示一次）
reoeat-x（只沿X轴水平平铺）
repeat-y（只沿Y轴垂直平铺）
epeat（沿水平和垂直两个方向平铺）

背景定位

值	含义
Ypos	单位：px； Xpos表示垂直位置
Xpos	单位：px； Xpos表示水平位置
X方向关键词	left、center、right
Y方向关键词	top、center、bottom

设计师如何对背景图片的大小进行控制呢？
背景尺寸：background-size

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
**径向渐变：**圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

CSS3渐变兼容性

IE浏览器是Trident内核，加前缀：-ms-
谷歌浏览器是Webkit内核，加前缀：-Webkit
Safari浏览器是Webkit内核，加前缀：-Webkit-
Opera浏览器是Blink内核，加前缀：-o-
火狐浏览器是Mozilla内核，加前缀：-moz-

排版网页文本：

color
text-align
text-indent
line-height
text-decoration

css响应式布局

**/*媒体查询*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
    
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
    #adver .center {
        width: 50%;
        margin: -10px 0 0 -25%;
    }
    main .center h2 {
        font-size: 40px;
    }
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
    #adver .center {
        width: 60%;
        margin: -10px 0 0 -30%;
    }
    #adver .search, #adver .button {
        font-size: 20px;
    }
    main .center h2 {
        font-size: 35px;
    }
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
    header, header .center, header .link {
        height: 45px;
    }
    header .logo, .sm-hidden,.sidebar,.md-hidden {
        display: none;
    }
    header .link {
        width: 100%;
        line-height: 45px;
    }
    #adver {
        padding: 45px 0 0 0;
    }
    #adver .center {
        width: 70%;
        height: 53px;
        margin: -10px 0 0 -35%;
    }
    #adver .search, #adver .button {
        height: 45px;
        font-size: 18px;
    }
    .sm-visible {
        display: block;
    }
    main .center h2 {
        font-size: 30px;
    }
    main .center p {
        font-size: 15px;
    }
    main figure {
        width: 49.2%;
    }
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
    header, header .center, header .link {
        height: 45px;
    }
    header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {
        display: none;
    }
    header .link {
        width: 100%;
        line-height: 45px;
    }
    header .link li {
        width: 25%;
    }
    #adver {
        padding: 45px 0 0 0;
    }
    #adver .center {
        width: 80%;
        height: 48px;
        margin: -10px 0 0 -40%;
    }
    #adver .search, #adver .button {
        height: 40px;
        font-size: 16px;
    }
    .sm-visible {
        display: block;
    }
    footer .bottom, footer .version {
        font-size: 13px;
    }
    main .center h2 {
        font-size: 26px;
    }
    main .center p {
        font-size: 14px;
    }
    main figure {
        width: 99%;
    }
}

CSS变形、过度与动画

目标：

会使用transform 2D变形设置网页元素样式
会使用transition制作过渡动画
会使用animation制作网页动画

那么如何在网页中实现动画效果呢？

动态图片
Flash
Javascript
CSS变形
CSS过度
CSS动画

CSS变形是一些效果的集合：

平移
旋转
缩放
倾斜等效
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
语法：

transform：{transform-fimctopm}*；
{transform-function}设置变形函数，可以是一个，也可以是多个，中间以空格分开

变形函数：
translate():平移函数，基于X、Y坐标重新定位元素的位置
scale():缩放函数，可以使任意元素对象尺寸发生变化
rotate():旋转函数，取值是一个度数值
skew():倾斜函数，取值是一个度数值

浏览器支持：

属性	2Dtransform
IE	9+
Firefox	3.5+
Chrome	4.0+
Opera	10.5+
Safari	3.1+

2D位移

translate(te,ty)
te：（X轴（横坐标）移动的向量长度）
ty：(Y轴（横坐标）移动的向量长度)

translateX（tx）：表示只设置X轴的位移

在这里插入图片描述

translateY（ty）表示只设置X轴的位移

在这里插入图片描述

2D缩放

在这里插入图片描述

scale()函数可以只接受一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

scaleX(sx):表示只设置X轴的缩放
在这里插入图片描述
scaleY(sy):表示只设置Y轴的缩放

2D倾斜

在这里插入图片描述

可以仅设置沿着X轴或Y轴方向倾斜：
skewX(ax):表示只设置X轴的倾斜
skewY(ay):表示只设置Y轴的倾斜

稳小情

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML与CSS的使用与总结

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。层叠样式表(英文全称：Cascading StyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用...
复制链接

扫一扫