`` 标签和 `` 标签一样,用于强调文本,但它强调的程度更强一些。
`em` 是 斜体强调标签,更强烈强调,表示内容的强调点。相当于html元素中的 `...`;
`< b > < i >` 是视觉要素,分别表示无意义的加粗,无意义的斜体。
em 和 strong 是表达要素(phrase elements)。
b标签和i标签的区别
b 元素现在描述为在普通文章中仅从文体上突出的不包含任何额外的重要性的一段文本。
例如:文档概要中的关键字,评论中的产品名。或者代表强调的排版方式。
i 元素现在描述为在普通文章中突出不同意见或语气或其他的一段文本,
例如:一个分类名称,一个技术术语,一个外语中的谚语,一个想法等。或者代表斜体的排版方式。
角度单位
deg
度(Degress)。一个圆共360度
90deg = 100grad = 0.25turn
grag
梯度(Gradians)。一个圆共400梯度
90deg = 100grad = 0.25turn
turn
转、圈(Turns)。一个圆共1圈
90deg = 100grad = 0.25turn
rad
弧度(Radians)。一个圆共2π弧度
90deg = 100grad = 0.25turn
CSS 多类选择器
一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:
解决方案You can check if the image's color model includes an alpha channel:BufferedImage img = ImageIO.read(/* from somewhere */);if (img.getColorModel().hasAlpha()) {undefined// img has alpha channel...
css学习归纳总结(一)
选择器的分组
CSS选择器分为
子选择器和后代选择器的区别:
注意:在IE6中,只支持后代选择器,不支持子选择器
盒子模型
css框模型介绍:
给
ul
下的li
设置宽度,那么他们将平均掉它们所占容器的宽度。div >ul> li> a
标签所占宽度和高度:当你为
body
元素指定div
时,每个div
默认的宽为浏览器的100%,高度在每个浏览器的解析都是不一样的,比如在火狐下是131px,在chrome
下则是142px,具体机制不明css字体速记规则
当用
css
定义字体样式的时候,你也许会这样做:没有必要这么做,因为你可以使用css速记属性:
值得注意的是:
css
速记版本只会在你同时指定font-size
和font-family
属性时才会生效。如果你没有指定font-weight
,font-style
,或者font-variant
,那么这些值将会自动默认为normal
避免多余选择器
有时候你会有如下的写法:
但实际上这是没必要的写法,因为只能存在于和中一样,这儿真没有把它们重复一次的必要。
等指的是
- 加载中...
孙哈哈
3楼 · 2020-05-09 15:37
- 加载中...
-
【Web前端基础】css是什么意思CSS教程
2020-11-17 10:00
回答 17
已采纳
-
什么是递归,用Java怎么实现2021-02-19 10:14
回答 19
-
【Web前端基础】css盒模型有几种CSS教程
2020-11-20 10:16
回答 16
已采纳
-
【Web前端基础】css浮动和定位有什么区别CSS教程
2020-12-04 14:16
回答 15
-
css选择器权重的计算公式是什么?2020-12-28 21:22
回答 13
已采纳
-
过渡和动画的区别?css样式
2020-11-27 19:17
回答 9
-
Web前端中文字如何自动换行?2020-03-31 13:47
回答 3
-
【Web前端基础】css定位方式有哪几种CSS教程
2020-12-02 09:56
回答 17
-
css如何利用transparent属性设置透明度CSS透明度
2022-04-01 18:58
回答 4
-
如何设置CSS样式中的透明度CSS透明度
2022-04-01 18:58
回答 4
-
java 怎么判断png图片是否是有透明度的CSS透明度
2022-02-25 15:20
回答 6
-
eclipse背景图片透明度怎么修改CSS透明度
2022-02-25 15:19
回答 5
-
CSS或JavaScript怎样实现图片透明度渐变CSS透明度
2022-02-16 11:23
回答 6
-
怎么用css调背景图片的颜色深浅而不会影响文字的效CSS透明度
2022-02-16 11:23
回答 4
-
CSS父级设置了透明,其中一个子元素不透明是什么原CSS透明度
2022-02-16 11:22
回答 2
-
css 滚动条怎么不占内容位置,且悬浮宽度变大CSS透明度
2022-02-09 18:54
回答 3
没有解决我的问题,去提问
-
什么是递归,用Java怎么实现
19 个回答
-
【Web前端基础】css浮动和定位有什么区别
15 个回答
-
过渡和动画的区别?
9 个回答
-
【Web前端基础】css定位元素的方式
14 个回答
-
【Web前端基础】css选择器有哪几种
15 个回答
-
HashMap底层原理是怎么实现的
13 个回答
-
【Web前端基础】css bfc机制是什么
12 个回答
-
【Web前端基础】css浮动的作用是什么
11 个回答
-
【Web前端基础】css浮动怎么理解
11 个回答
-
【Web前端基础】css如何清除浮动
12 个回答
-
如何在css里边添加背景音乐
6 个回答
- css3 3D立方体流星动画特效
0个评论
- 怎么用css属性屏蔽鼠标事件(鼠标点击可穿透上层元素)
0个评论
- 使用css选择器实现表格隔行换色
0个评论
- CSS盒模型的概念及组成 content padding border margin
0个评论
- css hack的概念? 常见的过滤器有哪些?
0个评论
- 使用CSS实现网站顶部彩色小长条小效果
0个评论
- Css背景切割与原点属性语法介绍以及使用
0个评论
- Css背景渐变属性语法介绍以及使用
0个评论
您已邀请15人回答
查看邀请
- 擅长该话题的人
- 回答过该话题的人
- 我关注的人
-
会且只会与
或
连用,就像!Important
所有被
!important
标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。!important:
IE7/IE8/IE9/FireFox
可以识别上面附加!important
的语句,看到附加!important
的语句后,就不会再去执行 第二句,尽管他们也“认识”第二句,但是附加“!important”的语句拥有绝对优先级,只要有它存在,第二句就不允许执行。IE6会执行
!important
的语句后,再去执行第二句“height:900px”
,用后面的样式覆盖了前面的样式,所以在IE6下,最终的height值是900px。@import and
在决定使用使用哪种方法去包含你的样式表之前,你应该明白这两种方法被用来干嘛?
链接式:
link就是把外部CSS与网页连接起来,将其加在
头部标签中,具体形式如下:
导入样式:
通过两个或以上的
css
文件共同部分,在css
页面引入css
文件,通过@import url(” “)
以上三种方式都有效,
区别:
行内元素、块元素和空元素
行内元素特点
行内元素在设置 水平方向的
padding-left、padding-right、margin-left、margin-right
都产生边距效果,但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom
却不会产生边距效果。块级元素特点
在html中,
、、
就是典型的行内元素(inline)元素。块级元素是可以设置宽高的,但是它的实际宽高是本身宽高+padding。block元素要多带带占一行。内联元素不多带带占一行,给他设置宽高是没有用的。
块级元素和行内元素列表:
空元素
知名的空元素:
<> <> <>> >鲜为人知的是: < style>
长度单位
em
em
为相对长度单位,相对于当前对象内文本的字体尺寸(font-size
)。比如:Web页面中body
的文字大小在用户浏览器下默认渲染是16px
,所以,此时的1em = 16px
;in
英寸(Inches)。绝对长度单位。
pt
点(Points)。绝对长度单位。
small
标签呈现小号字体效果。
,
和
,
标签
b标签和i标签的区别
角度单位
deg
度(Degress)。一个圆共360度
grag
梯度(Gradians)。一个圆共400梯度
turn
转、圈(Turns)。一个圆共1圈
rad
弧度(Radians)。一个圆共2π弧度
CSS 多类选择器
一个
class
值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:对于ID来说,就不能这样写了
所有浏览器下的CSS透明度
元素透明度时常是个恼人的问题,下面这种方式可以实现所有浏览器下的透明度设置:
Zoom
属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发IE的hasLayout
属性,清除浮动、清除margin
的重叠等。当一个元素的
hasLayout
属性值为true时,我们说这个元素有一个布局(layout)css float属性
定义和用法
float
属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS
中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
伟大的塌陷
使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素,那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到
清除浮动
如果你很明确的知道接下来的元素会是什么,可以使用
clear:both
; 来清除浮动。这个方法很不错,它不需要hack
,不添加额外的元素也使得它有良好的语义性。使用css 伪选择符(:after)来清除浮动:
渐进增强与优雅降级
概念
优雅降级和渐进增强印象中是随着
css3
流出来的一个概念。由于低级浏览器不支持css3
,但css3
的效果又太优秀不忍放弃,所以在高级浏览中使用css3
而低级浏览器只保证最基本的功能。咋一看两个概念差不多,都是在关注不同浏览器下的不同体验,关键的区别是他们所侧重的内容,以及这种不同造成的 工作流程的差异。渐进增强
progressive enhancement
:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级
graceful degradation
:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。区别
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
visibility:hidden和display:none
使用CSS
display:none
属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden
属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。text 文本属性
text-indent
text-indent
属性规定文本块中首行文本的缩进。注释:允许使用负值。如果使用负值,那么首行会被缩进到左边。使用一个较大的负值进行缩进的话,文字将被隐藏,如
-9999em
letter-spacing与word-spacing
letter-spacing
属性与word-spacing
的区别在于,前者是修改字母的间隔,后者是修改单词或单个文字的间隔text-transform
text-transform
属性处理文本的大小写。这个属性有 4 个值:text-decoration
text-decoration
有 5 个值:white-space
pre-line 合并空白符序列,但保留换行符 normal nowrap 防止元素中的文本换行pre 空白符不会被忽略pre-wrap 保留空白符序列
css学习归纳总结(二)
标签与元素
标签和
p
元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别。、
HTML
分隔符,而元素则是由一对开始结束标签构成的,用来包含某一些内容子选择器和后代选择器的区别:
注意:在
IE6
中,只支持后代选择器,不支持子选择器链接伪类
为了产生预期的效果,在 CSS 定义中,
a:hover
必须位于a:link
和a:visited
之后!a:active
必须位于a:hover
之后!!:after和:before伪元素
“伪元素”
,顾名思义。它创建了一个虚假的元素,并插入到目标元素内容之前或之后。伪元素如果没有设置“
content
”属性,伪元素是无用的。插入的元素默认情况下是内联元素,如果你要为其设置宽高等属性,你需要将他定义为块级元素
注入的内容将是有关联的目标元素的子元素,但它会被置于这个元素的任何内容的“前”或“后”。
web标准的构成
那么如何让关键选择器更有效,性能化更高呢?其实很简单,主要把握一点“越具体的关键选择器,其性能越高”
cellpadding与cellspacing
css的三性
浏览器读取你的选择器,遵循的原则是从选择器的右边到左边读取。换句话说,浏览器读取选择器的顺序是
由右到左
进行并非所有css属性都具有继承性,那么,哪些属性具有继承性呢?
无继承的属性:
我们在ul下设置
color
属性,并不会使ul>li>a
下的a
的字体发生样式的改变,但会使li
下的字体样式发生改变background属性
background-position:
X坐标 Y坐标各浏览器默认的css样式
地址:http://www.iecss.com/
伪类与伪元素选择符
伪类选择符
伪元素选择符
常用css hack技巧
地址:http://www.css88.com/book/css/hack/index.htm
IE条件注释法:
01.只在IE下生效
02.只在IE6下生效
css整理与优化工具
地址:http://www.css88.com/tool/csstidy/
css的缩写
font缩写
background的缩写
css超出 自动换行
只针对单行文本有效;
css-常用reset
注:
浮动与清除浮动 clear
对内联元素设置
float
和absolute
属性,可以让元素脱离文档流,并且可以设置其宽高。float: left的元素会尽量靠近父元素的左上角
float: right的元素会尽量靠近父元素的右上角
浮动框可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
编写更好的 css
避免过度约束
作为一般规则,不添加不必要的约束。
后代选择符最烂
不仅性能低下而且代码很脆弱,
html
代码和css
代码严重耦合,html代码结构发生变化时,CSS
也得修改,这是多么糟糕,特别是在大公司里,写html
和css
的往往不是同一个人。尽可能使用复合语法
避免不必要的重复
组织好的代码格式
代码的易读性和易维护性成正比。下面是我遵循的格式化方法。
div>ul>li>a 结构
结构为:
div>div>ul>li>a
div与div默认是重合在一起的,为了作区分,第二个div弄了个margin :5px
的间距在谷歌和火狐浏览器下,
div
与ul
的默认顶底部间距为20px,ul始终包裹着li,ul的高度由li撑起,块级元素的宽度默认为浏览器宽度。li距离ul左边有一小段间距,用来存放无序列表的小圆点(这里设置了list-style :none
)。定义一张图片也要为其设置
宽高
属性,否则无法进行定位设置,同理,很多元素必须设置其宽高
属性才能进行定位块级元素盒子会扩展到与父元素同宽,所有块级元素的父元素都是
body
,而它的宽度默认与浏览器窗口一样宽(当然有少量边距)。因为块级元素始终与浏览器窗口同宽。这样一来,一个块级元素旁边也就没有空间容纳另一个块级元素了。如何居中一个浮动元素
方法一
设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距
方法二
父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。
<html><head> <title>Demotitle> <meta charset="utf-8"/> <style type="text/css"> .p{ position:relative; left:50%; float:left; } .c{ position:relative; float:left; right:50%; } style>head><body> <div class="p"> <h1 class="c">Test Float Element Centerh1> div>body>html>
css学习归纳总结(三)
为文档添加样式的三种方法
行内样式
行内样式是写在
HTML
标签的style
属性里的,比如:行内样式会覆盖嵌入样式和链接样式。
嵌入样式
嵌入的
css
样式是放在HTML
文档的head
元素中的,这点想必大家都知道,这里就不赘述了。链接样式
链接样式的作用范围可以是整个网站。只要使用标签把样式表链接到每个页面,相应的页面就可以使用其中的样式,除了
link
方法外,还可以使用@import
指令@import
指令必须出现在样式表中其他样式之前,否则该链接的文件不会被加载不要乱用类
不要像使用
ID
一样,为每个类都指定一个不同的类名,然后再为每个类编写规则。如果你有这种随意使用类的习惯的话,那么,你还不了解继承和上下文选择符的作用。继承和上下文选择符(后代选择器)能让不同的标签共享样式,从而降低你需要编写和维护的css
量。使用继承方式降低你的
css
代码量:盒子边框
每一个元素都会在页面上生成一个盒子,因此,
HTML
页面实际上就上由一堆盒子组成的。默认情况下,每个盒子的边框是不可见的,背景也是透明的。边框(
border
)有如下3个相关属性:叠加外边距
垂直方向上的外边距会叠加,假设有3个段落,前后相接,而且都应用以下规则:
第一段的下外边距与第二段的上外边距相邻,你可能认为它们之间的外边距是80px,但实际的间距却是50px。像这样的上下外边距相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。因此,在这里,第二段较宽的上外边距就会碰到第一段的边框。也就是说,较宽的外边距决定两个元素最终离多远。这个过程就是
外边距叠加
。盒子有多大
设定width属性的盒子
没有设定width属性的盒子
从现在开始,“元素”和“盒子”从现在起代表了同一个意思。如果我们不设置块级元素的
width
属性,那么这个属性的默认值是auto
,结果会让元素的宽度扩展到与父元素等宽。看实例的话大家也比较烦,就拿着这个结论自己去验证下吧。
布局的基本概念
多栏布局有三种基本的实现方案:固定宽度、流动、弹性。
行内(inline)元素的一些属性
并不是所有的属性对行内元素都能够生效
使用CSS sprites
CSS
sprites
是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position
显示图片特定部分达到和分散的一张张小图片一样的效果。使用
CSS sprites
,会将所有的小图片整合到一张图片中,网页加载只需要对一张图片进行请求,CSS
再通过坐标的形式定位每一个小图片显示出来。这样做的好处是,大大减少http
请求数,提高网页加载速度。css sprites工具推荐:http://cn.spritegen.website-performance.org/
隐藏文本
隐藏网页元素的方法有很多,比如设置
display:none
,或是使用全透明(opacity
)。在设置文本的时候,有时并不希望文本丢失,而通常是把文字转移到屏幕外面,浏览器是可以检测到的。有如下两种隐藏文本的方式:
使用text-indent
在
h1
上设置logo
为背景并设置居中来做SEO
:使用定位
rgba和opacity
rgba()
和opacity
都能实现透明效果,但最大的不同是opacity
作用于元素,以及元素内的所有内容的透明度,而
rgba()
只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)ou和ul的列表缩进
IE使用
margin-left
来缩进列表,而Safari
和Firefox使用padding-left
。而IE的默认样式是:
去除li的左边距,比如:
或者也可以只针对
IE
进行修复:css选择符思维导图
css工具推荐
不写具体介绍啦 截个图给你们吧 说再多都比不上一张图呢
EnjoyCSS 能创建活跃,超棒的实例,EnjoyCSS 生成器大大简化了自定义类声明。EnjoyCSS 是众多
CSS
工具中非常有用的,也是开发者和设计师工具箱必备的利器之一。它能加快工作流,简单易用,不需要编码就能整合丰富的图形样式到简单的UI
。css3生成器
css3 maker
hands On css3
http://css3.mikeplate.com/
HTML5/css3 box
浏览器hacks技巧
前端在线工具--开源中国
在线 css--实时预览
HTML5/css3浏览器支持表
OverAPI--齐全的API文档
css学习内容可以参考w3c。
具体学习方法:首先我觉得跟着视频学是比较快的,在听得过程中,不断练习,因为单词语法比较多,要尽可能的找空闲时间多记,多敲。结合html也可以在w3c上找着案例敲,都是不错的方法。
相关问题推荐
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说,CSS具有以下特点:丰富的样式定义CSS提供了丰富的文档样式外观,以及设置文本和背景属性...
递归做为一种算法在程序设计语言中广泛应用.是指函数/过程/子程序在运行过程中直接或间接调用自身而产生的重入现象
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。盒子模型分为两种:第一种是W3c标准的盒子模型(标准盒模型)第二种IE标准的盒子模型(怪...
浮动和定位都可以使元素脱离标准文档流,提升层级, 浮动脱离文档流,提高半个层级,不能完全覆盖下面元素(不能覆盖图片文字)定位脱离标准文档流,提升一个层级,可以完全覆盖下面元素及其内容...
内联样式,如: style= ,权值为1000。ID选择器,如:#content,权值为0100。类,伪类和属性选择器,如.content,权值为0010。类型选择器和伪元素选择器,如div p,权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。...
css过渡与动画主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。css过渡与动画区别总结:1、动画不需要事件触发,过渡需要。2、...
一段文字在标签的宽度内是不会自动换行的,可以给标签设置小一点的宽度,碰到标签的右边缘就会自动换行了
定位:1、相对定位 position:relative; 兼容2、绝对定位 absolut 兼容3、固zhuan定定位 fixed ie6不兼容
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent transparent在 不同 css版
怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。.box{width:300px;height:200px;margin:0auto;boxder:1pxsolid#ccc;background:#000;filter:alpha(opacity:30);opacity:0.3;-moz-opacity:0.3;-khtml-o...
解决方案You can check if the image's color model includes an alpha channel:BufferedImage img = ImageIO.read(/* from somewhere */);if (img.getColorModel().hasAlpha()) {undefined// img has alpha channel...
找到 eclipse 的安装目录 进入到 plugins 文件夹下,这个文件是管理 eclipse样式相关的文件夹然后我们进入它的子目录 org.eclipse.ui.themes_1.2.1.v20170809-1435 文件夹,去里面找 与 eclipse 相关的样式设置,继续寻找来到 这个界面。 考到css 文件夹,与...
css问题filter: alpha(opacity=100,finishopacity=0,style=2)alpha是来设置透明度的,它的基本属性是filter:alpha(opacity,finishopacity,style,startX,startY,finishX,finishY).opacity代表透明度数,选值0-100,0是完全透明,100是不透明.finishopacit...
设置背景颜色:要设置背景颜色,直接使用background:颜色值;即可。如:body{background:#000}将body的背景颜色设置为黑色。 设置背景图片:1.规律背景图片。不如我们要设置一个渐变的背景图片,这种背景只需要切出1像素宽,高度合适的图片作为背景即可。body...
原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。 可以使用一张透明的图片做背景可以达成效果...
用css 隐藏掉overflow在用div 模拟重画滚动条,用div和z-index配合模拟滚动条
等你来答
热门问答
相关文章
采纳回答
编辑标签
举报内容
打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮
付费偷看金额在0.1-10元之间