css倍数样式,css倍数选择器
css行高倍数问题?
这个1.5一般显示的比较好,你设置成2也无所谓。是为了让文本排版好看而设定的值。dw视图下会存在很多bug,尤其是css方面。主要看是要用浏览器查看
创新互联主要从事成都做网站、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务南明,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
CSS代码里em, strong,ul,这之类的都是什么意思啊?
em: 如果你说的是标签, 表示强调文本内容, 通常以斜体表示(目前一般不建议使用, 建议用css样式实现), 如果是长度单位, 它是一个相对单位, 表示相对于当前元素内文本高度的比例
strong: 表示重要文本, 通常用加粗的样式(目前一般不建议使用, 建议用css样式实现)
ul: Unordered List, 无序列表, 还有一个对应的ol(ordered list, 就是有序列表)
CSS 核心样式、H5 + C3 新特性
粗细font-weight
设置文字是否加粗显示 。 有两种类型 :单词类型、数字类型
单词类型 | 属性值 | 说明
| normal | 默认值,定义批准的字体
| bold | 定义粗体字符 ,b strong标签 的默认值
| bolder | 定义更粗的字体
| ligher | 定义更细的字体
数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400==normal 700==bold
字体风格font-style
设置字体是否斜体显示。
| 属性值 | 说明
|normal | 设置正规的字体 , 大多是标签的默认值
| italic | 设置斜体的文字 ,主要针对英文,要求英文以字体中的斜体样式显示
| oblique | 设置斜体的文字 , 只是将文字倾斜显示 , 与字体无关
**行高 line-height **
设置的是一行文字实际占有的高度,文字字号在行高中是垂直居中的。
| px 像素值 | 设置的行高的具体像素值
| 百分比数值 | 设置的本身字号像素值的百分比
字体综合font
1.字号 、 字体
2.字号 /行高 、字体 重点是字号和行高之间使用 /
3.加粗和斜 体两个值之间可以互 换位置 、 字号、行高、字体不能更改位置。
水平对齐text-align
设置文本水平方向的对齐
| 属性名 | 作用 |
| left | 居中对齐,大部分标签的默认值
| center | 居中对齐
| right | 居右对齐
文本修饰 text-decoration
设置文本整体是否有线条的修饰效果
| 属性名 | 作用 |
| none | 没有修饰, 大部分标签的默认值
| overline | 上划线
| line-through | 中划线,删除线del 标签的默认值
| underline | 下划线,a标签的默认值
**缩进 text-indent **
设置段落首行是否进行缩进
| px 单位 | 表示首行缩进多少像素
| em单位 | 首行缩进几个中文字符的位置
| 百分比 | 表示缩进文字所在标签的父级标签width 属性值的百分比
书写元素内容区域 width+height
盒子可以实体化的区域 width + height + padding + border
盒子实际占位的位置 width + height + padding + border + margin
宽度width 高度height
设置可以添加元素内容的区域的宽度
| auto | 默认值,浏览器可计算出实际的宽度
| px | 像素值定义的宽度
| % | 定义参考父元素宽度width 的百分比宽度
内边距padding 、 外边距margin
内边距padding:设置的是元素的边框内部到宽高区域之间的距离。
外边距margin: 设置的是盒子与盒子之间的距离。
四值法 上右下左 padding : 10px 20px 30px 40px;
三值法 上 左右 下
二值法 上下 左右
单值法 四个值相同
边框border
设置的是内边距外面的边界区域 作为盒子的实体化的最外层
border :“宽度 线 颜色 “
border-style | 属性值 | 说明
| none | 定义无边框
| solid | 定义实线
| dashed | 定义虚线 在大多数浏览器中呈现为实线
| dotted | 定义点状边框,在大多数浏览器中呈现为实线
| double | 定义为双线,双线的边框的宽度等于 border-width的值
| groove | 定义3D凹槽边框,其效果取决于border-color 的值
| ridge | 定义3D垄装边框,其效果区域于border-color 的值
| inset | 定义3D内容凹陷效果,其效果取决于border-color 的值
| outset | 定义3D内容凸出效果,其效果取决于border-coloe 的值
清除默认样式
1.大部分容器标签都有默认边距,要么用标签选择器的并集方式,要么通配符清除。
2.ul和li两种列表有默认的列表前缀,清除list-style属性
3.a标签的默认样式,顺带设置页面中常用的a的公共样式:color和text-decorstion
4.清除默认加粗效果:设置font-weight
父子盒模型
父元素的width = 所有子元素width + padding + border + margin
margin塌陷现象
margin塌陷现象:在垂直方向如果有两个元素的外边距有相遇的,浏览器中加载的 真正的外边距不是两个间距的加和,而是两个边距中值较大的,边距值小的塌陷到 了边距值大的值内部
同级元素塌陷: 大的margin吃掉小的
标准文档流:指得是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排版方式。前面内容发生了变化,后面的内容位置也会随着发生变化
微观现象
1.空白折叠现象。
2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3.自动换行,元素内一行内容写满元素的width时会自动进行换行。[图片上传失败...(image-5327c1-1604048626452)]
元素等级
块级元素:大部分容器级标签包括p标签都是块级元素,比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行内元素:大部分的文本及标签比如 a,span,i(斜体),em(强调),sub(下标),sup(上标) 等。
行内块元素: (img,button,input,textarea,select), img等
显示模式display
display 属性更改的显示模式并没有改变标准流本质性质
| 属性值 | 作用
| block | 表示元素要以块级元素模式加载,具备块级特点
| inline | 表示元素要以行内元素模式加载,具备行内特点
|inline-block| 表示标签及行内块模式加载,具备行内块特点
| none | 表示标签及内容直接隐藏,让出原有标准流的位置
脱离标准流
标签元素脱离标准流的方法包括:浮动、绝对定位、固定定位
浮动定义
1.浮动 (float):让元素脱离标准流,同一级的浮动的元素可以并排在一排显示
float : right / left
浮动的问题二:父元素没有高度,会影响后面元素的标准流位置,如果福哦的那个的子元素足够高,有可能影响到后面浮动的贴边。
[图片上传失败...(image-7923f-1604048626452)]
清除浮动方法
清除浮动一:给标准流的父元素强制给一个合适的高度height
解决:浮动元素影响后面元素标准流位置和贴边。
问题:父元素不能高度自适应,后面父元素之间如果有margin效果不正确。
清除浮动五:溢出隐藏
overflow:hidden
总结 如果父元素高度是固定的,建议使用height属性解决
如果父元素告诉需要自适应,建议使用overflow属性解决浮动问题
要想让每个伪类的状态正常加载,书写顺序必须是:访问前link、访问后visited、 鼠标移上hover、鼠标点击active。
-背景颜色 background-color
-背景图片 background-image 属性 url(图片路径)
-背景重复 background-repeat
| repeat | 重复,默认属性值,表示会使用背景重复加载填满整个盒子背景区域
| no-repeat| 不重复,不论背景图是否大于盒子范围,都只加载依次图片
| repeat-x | 水平重复,使用背景图片水平重复加载铺满第一行,垂直方向不重复
| repeat-y | 垂直重复,使用背景图片垂直重复加载铺满第一列,水平方向不重复
-背景定位 background-position 主要用于设置 不重复 的图片在背景区域的加载开始位置
单词表示法 水平方向可选单词:left、center、right
垂直方向可选单词:top、center、bottom
像素表示法 水平 垂直 border以内的
百分比表示法 100%代表的数值
水平方向,等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向,等价于盒子的border以内的背景区域高度减去图片的高度。
-背景附着 background-attachment
| scroll | 滚动的,表示背景图片与盒子保持相对位置不变,随着页面的滚动而滚走
| fixed | 固定的,背景图的定位的参考点从盒子border,以内的左上顶点变为了浏览器窗口的左 上顶点,页面滚动时,浏览器窗口的左上顶点是不变的,导致背景图固定在浏览器窗口 的某个位置,不会随着页面滚动而滚走
background 属性可以将五个单一属性的值进行合写。 属性值:可以有 1-5 个属性值,值之间用空格进行分隔,背景定位的两个属性值算作 一个属性值,不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
-背景缩放background-size 设置img的尺寸
| px值 | 1-2个像素值,只设置1个值,垂直方向等比例拉伸;设置2个值,按照设置值 加载
| 百分比 | 同像素值设置方法相同,设置百分比时,数值参照盒子的宽、高属性
| cover | 自动调整缩放比例,把背景图像扩展至足够大,以使背景图像完全覆盖背景区 域。如有溢出部分则会被隐藏。
| contain | 自动调整缩放比例,把图像图像扩展至最大尺寸,保证图片始终完整显示在背 景区域
-相对定位 relative
相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置
-绝对定位 absolute 脱离标准文档流
子绝父相 、 子绝父绝 、 子绝父固
-固定定位 fixed 脱离标准文档流
-压盖顺序 z-index
HTML5
[图片上传失败...(image-974217-1604048626452)]
audio音频标签 ogg mpeg wav
| 属性 | 值 | 描述
| autoplay| autoplay| 如果出现该属性,则音频在就绪后马上播放
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮
| loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。
| preload | preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
| src | url | 要播放的音频的 URL。
video 视频标签 ogg mp4 webm
[图片上传失败...(image-361a85-1604048626452)]
| 属性 | 值 | 描述
|autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
| controls | controls | 向用户显示播放控件
| loop | loop |放完是否继续播放该视频,循环播放
| preload | auto |(预先加载视频)
none(不应加载视频) 规定是否预加载视频(如果有了autoplay 就忽略该属性)
| src | url | 视频url地址
| width | pixels(像素) |设置播放器宽度
| height | pixels(像素) |设置播放器高度
| poster | Imgurl | 加载等待的画面图片
| muted | muted | 静音播放
属性值 描述
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range" 滑动条
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单
datalist 标签
• datalist 标签规定了 input 元素可能的选项列表。
• datalist元素包含了一组option元素,这些元素表示预定义可选值,在input元素输入
过程中,会自动响应option元素的值。
• 绑定的input标签必须设置 list 属性,属性值等于datalist标签的 id 属性值。
新增表单属性
属性 值 描述
required required 表单拥有该属性表示其内容不能为空,必填
placeholder 提示文本 表单的提示信息,存在默认值将不显示
autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单,一般页面中放1个
autocomplete off / on 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填 写的选项。
默认已经打开,如 autocomplete=”on “
关闭 autocomplete =”off”
-需要放在表单内同时加上name属性
-同时成功提交
multiple multiple 可以多选文件提交
CSS3
子级选择器
子级选择器用于选取带有特定父元素的元素 书写语法element1element2
[图片上传失败...(image-bb266d-1604048626452)]
兄弟选择器
--相邻兄弟选择器 用于选择 紧接 在另一个元素后的兄弟元素,而且二者有相同的父元素。
| element1+element2 | 匹同一个父元素中紧跟在element1后面的一个element2元素
--其他兄弟选择器 匹配同一个父元素中在element1后面的 所有 element2元素
| elemenet~element2 | 匹配同一个父元素中elemenet1后面的所有element2元素
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 这个是元素的第几个在元素下选取
属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
box-sizing属性
content-box 标准模式 盒子总体大小为 width(height) + padding + border
border-box 怪异模式 盒子总体大小为 width 和 height
[图片上传失败...(image-cdef05-1604048626452)]
文字阴影text-shadow
| 属性值 | 简介
| h-shadow | 必需。水平阴影的位置。允许负值。
| v-shadow | 必需。垂直阴影的位置。允许负值。
| blur | 可选。模糊的距离。
| color | 可选。阴影的颜色。
--transition-property过渡的属性
• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名,多个属性名中间逗号分隔
--时间
以秒为单位 0s必须加单位
--transition-timing-function 时间曲线
对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识,可 以取代大量之前只能靠Flash才可以实现的效果。
位移translate()
translate(x,y) x,y分别为水平和垂直方向位移的距离,可以为px值或百分比, 区分正负
translate(x) 只有一个数值,表示水平方向的位移
translate(y) 只有一个数值,表示垂直方向的位移
缩放 scale()
值 说明
scale(x, y) x,y分别为改变元素的宽度和高度的倍数
scale(n) 只有一个值,表示宽度和高度同时缩放n倍
scaleX(n) 改变元素的宽度
scaleY(n) 改变元素的高度
旋转 rotate(deg)
deg为度数单位,正数表示顺时针旋转,负数表示逆时针旋转
倾斜 skew()
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度,属性值可以为正可以为负,第二个 数值不写默认为0
transform-origin 属性
设置调整元素的水平和垂直方向原点的位置
x 定义 X 轴的原点在何处。可能的值:left 、center、right、像素值、百分比
y 定义 Y 轴的原点在何处。可能的值:top、center、bottom、像素值、百分比
[图片上传失败...(image-ac107d-1604048626452)]
透视属性 perspective
作用:设置在 z 轴的视线焦点的观察位置,从而实现 3D 查看效果。
属性值:像素值,数值越大,观察点距离 z 轴原点越远,图形效果越完整且接近原始尺寸。 注意:透视属性需要设置给 3D 变化元素的父级
3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
[图片上传失败...(image-e781c5-1604048626452)]
3D 位移
translateX(x) 设置 X 轴的位移值。
translateY(y) 设置 Y 轴的位移值。
translateZ(z) 定义3D位移,设置Z轴的位移值。
属性值为像素值或百分比,正负表示位移的方向。正值向对应轴的正方向移动,负值向对应 轴的负方向移动。
transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示,子元素会保留自己的 3D 转换坐标轴。
属性值:
flat:所有子元素在 2D 平面呈现
preserve-3d:保留 3D 空间
浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
css样式学习?
CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一
点,没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是
Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找。不管你用什么工
具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有
几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信
提问的问题整理出来,供诸位参考。
1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法?
当有多个网页要用到的CSS,采用外连CSS文件的方式,这样网页的代码大大减少,修改起来非常方便;只在单个网页
中使用的CSS,采用文档头部方式;只有在一个网页一、两个地方才用到的CSS,采用行内插入方式。
2、CSS的三种用法在一个网页中要以混用吗?
三种用法可以混用,且不会造成混乱。这就是它为什么称之为“层叠样式表”的原因,浏览器在显示网页时是这样处
理的:先检查有没有行内插入式CSS,有就执行了,针对本句的其它CSS就不去管它了;其次检查头部方式的CSS,有就执行
了;在前两者都没有的情况下再检查外连文件方式的CSS。因此可看出,三种CSS的执行优先级是:行内插入式、头部方
式、外连文件方式。
3、在Dreamweaver3中如何使外部文件式CSS?
在Dreamweaver3中使用外连文件式CSS并没有特殊要求,同样是用记事本创建一个*.css文件,在网页的head与
/head之间加上一句这样的代码:link rel="stylesheet" href="在这里填上你的CSS文件地址(相对路径+文件
名)" type="text/css" 就行了。
4、如何用Dreamweaver3快速创建CSS外连式文件?
对于一个初接触CSS的网页设计人员来讲,要用记事之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于
Dreamweaver3对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:
1)先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver3的编辑窗中调出CSS面板,一个一个地定
义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;
2)全部定义好后,再用记事本创建一个空的CSS外连式文件,把在head与/head之间的那段定义好的CSS复制
到CSS文件中去,就大功告成了。整个过程就是点鼠标,方便吧?
5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗?
不用!先用CSS面板定义好要用的CSS,然后,在要插入CSS的标记插入:style="",再把你刚才定义的CSS从head
后面拖到这个双引号中来,把花括号以外的部分删去就行了。
6、在方档头部方式和外连文件方式的CSS中都有“!--”和“--”,好象没什么用,不要可以吗?
这一对东东的作用是为了不引起低版本浏览器的错误。如果某个执行此页面的浏览器不支持CSS,它将忽略其中的内
容。虽然现在使用不支持CSS浏览器的人已很少了,由于互联网上几乎什么可能都会发生,所以还是留着为妙。
7、如何给一部分文字加背景色?
给文字加上不同颜色,在DW3中只要在属性面板上选取文字的颜色就行了,非常方便,但要给部分文字加不同的背景色
却没有相应的功能,我们可以先做一个定义背景色的CSS(如:bgstyle),在DW3中点几下鼠就完成了。如一个定义淡黄色
背景的CSS是这样的:
style type="text/css"
!--
.bgstyle { background: #FFFFCC}
--
/style
在要用时选取那段文字,再在CSS面板上点一下“bgstyle”就行了。
8、如何给部分文字加背景图像?
与加背景色操作类似,中是在背景在选择加载图象就是了,一个定义好的加背景图象的CSS例子的代码是这样的:
style type="text/css"
!--
.imgbgstyle { background-image: url(/logo.gif)}
--
/style
在要用时选取那段文字,再在CSS面板上点一下“imgbgstyle”就行了。
9、如何使页面的背景在文字“滚动”时背景图案静止不动?
要使背景图案不随文字“滚动”的CSS是这样的:
style type="text/css"
!--
BODY { background: purple url(/bg.jpg);
background-repeat:repeat-y;
background-attachment:fixed
}
--
/style
10、如何定义字间距?
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“letter spaceing”属性定义的就
是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下
面代码是一个定义好的字间距CSS例子:
style type="text/css"
!--
.style1 { letter-spacing: 3px}
--
/style
11、如何给文字加上划线、下划线、删除线和闪烁?
在DW3中CSS的属性定义对话框(style Definition for .style1)的“Type”上的“decoration”属性定义的就是这些
内容,要注意的是闪烁属性有些版本的浏览器不支持,少用为好。下面是一个定义好上述效果的CSS例子:
style type="text/css"
!--
.style1 { text-decoration: underline overline line-through blink}
--
/style
其中: “underline”是定义下划线;“overline ”是定义上划线;“ line-through”定义的是删除线;“blink”
定义的是文字闪烁。
12、如何使网页具有“首行缩进”功能?
由于DW3输入空格不方便,利用“首行缩进”将弥补这个不足。在DW3中CSS的属性定义对话框(style Definition
for .style1)的“Block”上的“text-indent”属性定义的就是“首行缩进”,所谓“首行”是指每段内容的第一行,也
就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉
字,设置好的CSS如下所示:
style type="text/css"
!--
.style1 { text-indent: 2em}
--
/style
在DW3要注意:在DW3中CSS的属性定义对话框(style Definition for .style1)的“Block”上的“text-indent”右
面的缩进单位选择框中“ems”指的就是“em”。
13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗?
可以!在DW3中CSS的属性定义对话框(style Definition for .style1)的“Box”上的“margin”定义的就是内容离
开边缘的距离,分别可定义四个方向:“top”“bottom”“left”“right”。下面就是定义在左边离开“10px”的CSS例
子代码:
style type="text/css"
!--
.style1 { margin: 0px 0px 0px 10px}
--
/style
14、能给某部分内容加边框吗?
用CSS可以给某部分内容加边框,在DW3中CSS的属性定义对话框(style Definition for .style1)的“Border”定义
的就是边框线,“top”“bottom”“left”“right”四边可分别定义线的粗细和颜色,这些定义好后不要忘记在下面的
“style”中定义线型,否则将看不边框线,因为默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框
为:绿色中粗线的CSS例子:
style type="text/css"
!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--
css3 scale怎么用
1、scale(x,y) 对元素进行缩放
X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
2、scaleX(number) 元素只在X轴(水平方向)缩放元素。
默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
3、scaleY(number) 元素只在Y轴(垂直方向)缩放元素。
基点一样在元素的中心位置。可以通过transform-origin来改变基点。
名称栏目:css倍数样式,css倍数选择器
标题网址:http://myzitong.com/article/dsgodhd.html