HTML与CSS的使用与总结

mac2024-03-12  26

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>FE>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、centertext-indent设置首行文本的缩进。如:text-indent:2px。单位可以是em或pxtext-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、rightY方向关键词top、center、bottom

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

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

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

CSS3渐变兼容性

IE浏览器是Trident内核,加前缀:-ms-谷歌浏览器是Webkit内核,加前缀:-WebkitSafari浏览器是Webkit内核,加前缀:-Webkit-Opera浏览器是Blink内核,加前缀:-o-火狐浏览器是Mozilla内核,加前缀:-moz-

排版网页文本:

colortext-aligntext-indentline-heighttext-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制作网页动画

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

动态图片FlashJavascriptCSS变形CSS过度CSS动画

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

平移旋转缩放倾斜等效 每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 语法: transform:{transform-fimctopm}*; {transform-function}设置变形函数,可以是一个,也可以是多个,中间以空格分开

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

浏览器支持:

属性2DtransformIE9+Firefox3.5+Chrome4.0+Opera10.5+Safari3.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)