分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

h5与css3

发布时间:2023-09-06 02:34责任编辑:彭小芳关键词:暂无标签

<!--注释-->不显示与页面上

<hr/> 水平线 <h1> 字体大小

<p> 段落 <br/> 换行

Size 粗细 color 颜色

Strong/b 加粗 em/I倾斜 src 图像位置

alt 图像不能显示时显示的文字

title 鼠标悬停时的标记

width 宽度

height 高度

img border 边框宽度

图像标记 vspace垂直边距/图像顶部和底部的空白

hspace 水平间距/图像左部和右部的空白

left 左

center 中

align right 右

对齐属性 top 图像顶端和第一行文字对齐,其他文字在图像下方

middle 图像中线和第一行文字对齐,其他文字在图像下方

bottom 图像底部和第一行文字对齐,其他文字在图像下方

href 指定引用外部文件的地址

rel stylesheet 指定当前文档与引用文档关系,属性值常为stylesheet,表示定义一个外部样式表

text/css 引用外部文档类型为css样式表

text/javascript 引用外部文档类型为javascript脚本

<link rel=”stylesheet’type=”text/css”href=”#”/> “#”为空文件

<a href=”跳转的地方”target=“目标窗口弹出方式”>文本或图片</a> 超链接

_self 默认值 原窗口

_blank 新窗口

元素列表

ul无序列表

ol 有序列表

dl 指定列表 dt 所需描述的 dd 描述文字

结构元素

header 引导,导航,常放与头部,代表一个区域

nav 将带链接的归于一定区域

article 将文档上下不相关的部分分开 用section 划分

aside 定义当前页面或文章的附属信息,可以包含相关或有别于主要内容的部分

在article内做主要内容附属信息

在article外作页面或站点全局的附属信息,广告,友情链接等

section 分块,常由内容和标题组成。不要将section用于设置样式的页面容器没有标题的内容板块不要使用section元素定义,如果article,aside,nav更符合使用条件,就不要使用section。

footer 定义一个页面或区域的底部,可以包含所有通常放于页面底部的内容

分组元素

figure 用于独立的流内容(图像、照片、代码),一般指一个单独的单元。 内容与主要内容有关 ,如果被删除,也不会对文档流产生影响

figcaption 为figure添加标题,一个figure元素最多允许使用一个figcaption,常用于第一个和最后一个位置

hgroup 将多个标题组成一个标题组。如果有一个标题不建议使用,当一个标题包含副标题、section或article元素时,建议将hgroup元素和标题相关元素放在header中

页面交互元素

details 用于描述文档或文档某个部分的细节

summary 常用于和details配合使用,作为第一个元素,定义标题(题目)

value 已完成的工作量

max 总共有多少工作量

high 被界定为高的值

low 被界定为底的值

max 最大值 默认值1

min 最小值 默认值0

optimum 定义什么是最佳值

value 要输入的值

文本层次语义元素

time用于定义时间或日期,可以表示24小时中的某一时间。不会在浏览器呈现任何特殊效果,但会使搜索引擎生成更加智能的搜索结果

datetime 取值为具体时间或具体日期,不定义时,由元素给定时间/日期

pubdate 用于定义time中日期/时间是文档的发布日期 其值一般为pubdate

mark 在文本中高亮某些字符,引起注意

cite 创建一个引用标记,被引用的文档以斜体出现 --李白《静夜思》

全局属性

draggable 定义元素是否可以拖动

hidden 元素是否隐藏

spellcheck 是否进行拼写和语音检查

contenteditable 属性是否可编辑元素的内容,前提是该元素必需获得鼠标焦点并且内容不是只读的

/*注释*/ 不显示于浏览器上

css 样式中的选择器严格区分大小写,属性和值不区分大小写,书写一般都采用小写。

多个属性之间必须用英文状态下的分号隔开,最后一个可以省略,但最好不要.

如果属性的值由多个单词组成且中间包含空格,则必须加上英文状态下的引号。

行内式(内联样式)是通过标记的style来设置样式 ,写在<body>标记中

<标记名 style=“属性:属性值;”>内容</标记名>

<h2 style=”font-size:20px;color:red:”>文字或其他</h2>

内嵌式 写在<head>头部标记,并且用<style>标记定义

<styletype=”text/css”>

h2{color:red;} </style> 选择器{属性: 属性值 ; }

链入式 将所有的样式放在以.css为扩展名的外部样式表中,通过<link/>标记链接但html文档中,写在<head>标记中

<link href=”css文档路径”type=”text/css” rel=”stylesheet”/>

CSS基础选择器

  1. 标记选择器 标记名 (p,h) 令标记的显示

按标记名称分类,为页面中某一类标记指定统一的css样式,优点是能快速为同类型的标记统一样式,也是缺点,不能设计差异化样式

标记名{ 属性:属性值;}

P{font-size:12px; color:#66;}

  1. 类选择器 .类名 class=”类名(可以一个以上的类名)”

类名即为html元素的class属性值, 使用“.”(英文点号)进行标记,后面紧跟类名。最大的优势是可以为元素定义相同或单独的样式。类名的第一个字符不能使用数字,严格区分大小写,一般采用小写的英文字符

. 类名{ 属性:属性值;}

. red{color:red;} class=”red”

  1. Id选择器 #id名 id=“id名”

Id名即为html元素的id属性值,使用“#”进行标记,后面紧跟id名。元素的id值是唯一的,只能对应文章中某一个具体的元素。同一个id名也可以应用多个标记,但是不被允许。不支持像类选择器呢样定义多个值

#id名{属性:属性值;}

  1. 通配符选择器 *

是所有选择器中作用范围最广的,能匹配所有的元素。实际中不建议使用,因为不管需不需要都会标记,反而降低了代码的执行速度

  1. 标签指定式选择器(交集选择器) 标记选择器+

由两个选择器构成,第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能由空格

p.special仅仅适用与<p class=”special”>

6.后代选择器 元素嵌套

用来选择元素或元素组的后代,写法是外层标记在前,内层标记在后,中间用空格隔开。当发生嵌套时,内层标记就成了外层标记的后代

Pstong仅仅适用与<p>…<strong>…</strong>…<p>的形式

不仅限于使用两个元素,如果需要其他元素,只需在元素间加上空格

7.并集选择器 逗号连接

将各个选择器通过逗号连接,包括任何选择器都可以作为并集选择器一部分。

与单独使用效果完全相同

相对长度

font-size

字体大小

绝对长度

各种字体之间必须使用英文状态下的逗号隔开。

中文字体需要加英文状态下的引号,英文字体不需加引号。写时英文

字体必须在中文字体前

如果字体名包含空格,#等符号则必须加英文状态下的单引号或双引号

font 综合字体设置 (字体,大小,,,一起使用) p{font:30px bold;}

@font-face属性

Word-wrap属性

Color颜色

letter-spacing 定义字间距。 中英文都行,允许使用负值,默认值为normal

word-spacing 定义英文单词之间的距离。 对中文字符无效,允许使用负值,默认值normal

line-height 行间距。 属性单位有三种 像素px(使用最多),相对值em,百分比%

text-indent 首行缩进。可以使用负值,建议使用em

text-shadow 阴影效果。h-shadow水平阴影距离,v-shadow垂直阴影距离

blur 模糊半径 , color阴影颜色

Css3选择器

P[id^=”a”] p元素中id属性值以a开头的选中

属性选择器 p[id$=”b”] p元素中id属性值以b结尾的选中

P[id*=”c”] p元素中id属性值含c的选中

:root 对所有页面元素生效

:not 排除一个结构元素下面的子元素,让它不使用这个样式

:only-child 适用于某个父元素仅有一个子元素

: first-child 用于父元素的第一个元素

: last-child 用于父元素的最后一个元素

: nth-chilld(n) 选择某个父元素中第n个元素

: nth-last-child(n) 选择某个父元素中倒数第n个元素

: nth-of-type(n) 选择某个父元素中匹配特定类型的第n个元素

: nth-last-of-type(n) 选择某个父元素中匹配特定类型倒数第n个素

:empty 选择没有子元素或文本内容为空的所有元素

:target 选择页面中target元素(前提点击了页面中的超链接

并且跳转target元素后)

CSS盒子模型

width 宽度 height 高度 border 边框

background 背景颜色 padding 内边距 margin 外边距

div 英文division的缩写,意为“分割,区域”。简单来说就是区块容器标记。最大意义在于与浮动元素float结合

border-width 边框宽度

border-color 边框颜色

border-radius 圆角边框

box-shadow 添加阴影效果 box-shadow:水平 垂直 半径 扩展 颜色 阴影类型;

阴影类型 内阴影(inset)/外阴影(默认)(可选属性)

box-sizing 用于定义盒子的宽度值和高度值是否包括元素的内边距和边框

float 浮动元素

*{padding:0;

Margin:0;}

背景属性

设置背景颜色

background-color来设置元素背景颜色。可使用预定义的颜色值,十六进制

#RRGGBB或RGB代码rgb(r,g,b)。默认值transparent,即背景透明,此

时子元属会显示父元素的背景

设置背景图像

background-image background-image :url(...);

背景与图片不透明度的设置

RGBA模式 是CSS3新增的颜色模式,是RGB颜色模式的延伸,该模式是在红绿蓝三原色的基础上添加了不透明参数

P{background-color:rgba(r,g,b,alpha)}alpha不透明度(0~1之间)

opacity属性 定义元素的不透明度

P{opacity : opacityValue;} opacityValue不透明度(0~1)

设置背景图像平铺

background-repeat 定义图像平铺方式

设置背景图像的位置

background-position 用以定义背景图片在元素的水平和垂直方向的坐标。一

般为两个值,中间用空格隔开

设置背景图像固定

background-attachment 设置背景图像固定在屏幕的某一位置,不随着滚动条移动

设置背景图像的大小

background-size 控制背景图片大小。可以设置为两个值

设置背景的显示区域

background-origin 定义图像的相对位置。默认元素左上角为坐标原点定位

设置背景图像的裁剪区域

background-clip 定义背景图像的裁剪区域

设置多重背景图像

通过背景属性提供的多个属性值来实现多重背景图像效果,各属性值之间用逗号隔开

background-position:bottom ,right top ,center;

背景复合属性

background 复合属性(综合)。各个样式顺序任意,对于不需要的可以省略

background:【background-color】【background-image】【background-repeat】

【background-attachment】 【background-position】

【background-size】【background-clip】【background-origin】;

使用背景图像属性定义列表样式

list-style 复合属性,用于控制列表项目符号的样式

list-style :none; 清除列表的默认显示样式

*{padding:0;margin:0;list-style:none;}

CSS3渐变属性

线性渐变

background-image:linear-gradient(渐变角度,颜色值1 n%,颜色值2 n%...);

起始颜色会沿一条直线过渡到结束色,各颜色之间用“,”隔开。每个颜色

值后可以加一个百分比数值,用以标明颜色渐变的位置 (可不写)

径向渐变

background-image:radial-gradient(渐变形状 圆心位置,颜色值1,颜色值2...);

起始颜色会从一个中心点开始,依据椭圆或圆形进行扩张渐变 。每个颜色

值后可以加一个百分比数值,用以标明颜色渐变的位置 (可不写)

渐变形状 定义径向渐变的形状,可以是定义水平和垂直半径的像素值或百

分比,或相应的关键词

&

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved