CSS3-样式继承，层叠管理，文本格式化

CSS3学习笔记-1：CSS样式继承

自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个…

《CSS3实战》读书笔记第4章：样式继承

节省你的时间--样式继承 ### 什么是继承? 后代元素可以继承先代元素的一些属性.有了它,可以省去分别定义样式的时间.继承了方向是由外而内的. ### 继承的局限性应该注意到,有些属性是不适宜继承的. 作为全局规则,背景色,margin ,border不继承. 浏览器定义的规则,比如h标题,超链接a,等不予继承开发者应用自己定义的样式,不会继承先代属性. ### 综合案例:继承是怎样工作的 html骨架 <body> <div><img src="images…

css样式继承规则详解

css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继承的. 2.表格能继承父亲的样式么? 不能 3.如何给当前设置的样式添加最高权限? !important 设置某个规则比其他的规则更重要 4.继承发生冲突的时候,什么样式获得胜利? 最近祖先二.CSS3学习笔记-1:CSS样式继承自己在写css时总会遇上css样式继承的问…

css006 文本格式化

css006 文本格式化文本格式化:字体(font-family).颜色(color).字号(font-size). 行距(line-height).粗体(font-weight).斜体(font-style). 背景(background).间距(word-spacing/letter-spacing). 缩进(text-indent).对齐(text-align).大小写(text-transform). 空白属性(white-space).装饰(text-direction) 1. …

css005 用层叠管理多样式

css005 用层叠管理多样式当一个元素继承多个样式时,最近的祖先样式胜出(通俗一点就是自己有就用自己的,自己没有找parent,parent没有找grandprent,再没有就一级一级网上找) 当一个标签多个样式时,用权值决定哪种样式胜出. 如:标签选择器 1分 img{} 类选择器 10分 .class{} ID选择器 100分 #benner{} 内建样式1000分 (一目了然) 权值相同时最后一个样式胜出…

HTML的文本格式化

文本格式化:<html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br />…

HTML 文本格式化

HTML 可定义很多供格式化输出的元素,比如粗体和斜体字. 下面有很多例子,您可以亲自试试: HTML 文本格式化实例文本格式化此例演示如何在一个 HTML 文件中对文本进行格式化预格式文本此例演示如何使用 pre 标签对空行和空格进行控制. “计算机输出”标签此例演示不同的“计算机输出”标签的显示效果. 地址此例演示如何在 HTML 文件中写地址. 缩写和首字母缩写此例演示如何实现缩写或首字母缩写. 文字方向此例演示如何改变文字的方向. 块引用此例演示如何实现长短不一的引用语…

HTML文本格式化

文本格式化标签: 标签描述 <b> 定义粗体文本. <big> 定义大号字. <em> 定义着重文字. <i> 定义斜体字. <small> 定义小号字. <strong> 定义加重语气. <sub> 定义下标字. <sup> 定义上标字. <ins> 定义插入字. <del> 定义删除字. <s> 不赞成使用.使用 <del> 代替. <strike&g…

HTML学习（三）文本格式化

HTML文本格式化HTML 可定义很多供格式化输出的元素,比如粗体和斜体字.例1:此例演示如何在一个 HTML 文件中对文本进行格式化<html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /&g…

palacehoder的自定义样式【输入框input /文本域textarea】

7.palacehoder的自定义样式[输入框input /文本域textarea] 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea). ::-webkit-input-placeholder { /* WebKit browsers */ color:#999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#999; } ::-moz-placeho…

CSS-背景-渐变-文本格式化

1.背景 1.背景色属性:background-color 取值:合法的颜色值注意:背景颜色和背景图片默认都从边框位置处开始填充 2.背景图片属性:background-image 取值:url(图片的路径); ex: background-image:url(a.jpg); 3.背景图片平铺属性:background-repeat 取值: 1.repeat 平铺 2.no-repeat 不平铺,只显示一次 3.repeat-x 只在横向平铺 4.repeat-y 只在纵向平铺 4.背景…

javascript文本格式化之HTML标签（转载）

CSS02--四种样式、背景、文本、链接状态、表格样式

接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多个样式可以层叠为一. 1.外部样式表: <link rel="stylesheet" type="text/css" href="mystyle.css" /> 2.内部样式表: <style type="…

HTML（二）属性，标题，段落，文本格式化

HTML属性 HTML属性 HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签属性总是以名称/值对的形式出现,比如:name="value" 常用属性(尽量小写) name 名字 href 链接 class 为html元素定义一个或多个类名(classname)(类名从样式文件引入) id 定义元素的唯一id style 规定元素的行内样式(inline style) title 描述了元素的额外信息 (作为工具条使用) HTML标题标题(Headin…

[19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)

一.文本标签 em:用来表示一段内容的着重点,语气上的强调.一般显示为斜体 i:是斜体显示,和em显示效果一样.h5规定不需要着重的内容而是单纯加粗或斜体可以用i或b.用的不多 strong:用来表示一个内容的重要性.一般显示为粗体.与em可以单独使用,也可以一起使用. b:加粗显示,跟strong显示效果一样. small:标签中的内容会比他的父元素中内容小一点.在h5中来表示一些细则中内容,如版本声明,合同条款. big:没什么语义,很少使用. cite:网页中所有加书名号的内容都可以使用c…

css样式重叠、css样式继承、css 属性计算，，a元素下的文字颜色不能继承

1.属性的重叠在渲染前浏览器将判断使用哪个样式我们书写的样式会覆盖浏览器的自带样式我们写的样式进行权重比较,规则如下 !import Infiniti无穷大进制伪256行内样式 1000.id 100类选择器|伪类选择器|属性选择器 10元素选择器|伪元素选择器 1*通配符选择器 0多个选择器时进行相加值大的就作用成功 3.书写顺序靠后的胜出 2.css属性值计算只有所有属性都算出来,元素才会显示出来:属性值计算的过程确定声明值:将没有冲突的值,直接作为属性值层叠冲突:将冲突的属…

简单了解css3样式表写法和优先级

css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.然后是内容上css3主要包括盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等模块.而css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.最后在特点上css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变…

CSS3样式运用，悬浮立体方块

前言作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用. 我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了.现在流行扁平化设计,没有了阴影,没有了立体! 效果图实现思路这里一共做了两边,一种是用UL,一种是用DIV啦. 两种没什么区别,这里着重说DIV的方式. 父容器下有三个子元素DIV,全部左浮动,然后设置z-index.选中的(突出的)DIV用另一套样式,hover 用box-shadow属性,可以实现阴影效果,在网上还有-moz-box-…

HTML 文本格式化实例

一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化. <html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is empha…

css004 用样式继承节省时间

css004 用样式继承节省时间继承:inherit 继承可以简化样式表继承是有局限的,有些样式没法继承,如:border,width,height…

两款CSS3样式可视化在线生成工具

CSS3随着浏览器的升级已经被越来越广泛的运用,合理的运用CSS3可以使你的网站更加美观,并且之前只能用js才能实现的效果也已经可以直接用 CSS3来实现.但是虽然如此,很多浏览器对CSS3的支持还都是通过其私有属性来达到支持的,鲜有直接对W3C的标准来实现的.诸如firefox的 -moz-和webkit的-webkit-属性前缀. 不过CSS3本身W3C也并未有正式版发布,现在还只是草案.下面我推荐两个很直观的,可视化的,自动生成CSS3样式代码的工具网站给大家. 1.CSS3 Genera…

纯css3样式属性制作各种图形图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

鼠标HOVER时区块动画旋转变色的CSS3样式掩码

鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sticky notes using CSS3 and Google Fonts (Step 5)</title> </head> <body> <div style="text-align:center…

css样式继承第7节

样式继承: <html> <head> <title>样式继承</title> <style type="text/css"> .s{ border-bottom:2px solid red; font-size:30px; font-weight:bold; color:red; height:60px; line-height:60px; padding-left:20px; } .title { margin-left:…

jQuery/CSS3实现图片层叠展开特效

这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法,具体效果可以在在线演示中查看. 你也可以在这里查看在线DEMO演示说说实现的方法和代码吧,主要由HTML.CSS以及jQuery代码组成. HTML代码: <div id="page_wrap">  <div class=&q…

windows phone (13) 样式继承

原文:windows phone (13) 样式继承在上一遍文章中已经介绍到可以在Resources集合中定义样式,我们也可以在一个样式上引用其他的样式,这就是继承的概念,使用方法是将引用的样式放置在Style中的BaseOn属性:这里使用到的是xaml标记扩展进行设置,比如这里定义的三个样式: <phone:PhoneApplicationPage.Resources> <Style x:Key="tbStyle" TargetType="…

几个常用的CSS3样式代码以及不兼容的解决办法

原文:几个常用的CSS3样式代码以及不兼容的解决办法 border-radius实现圆角效果 CSS3代码: -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background-color:#666; width:200px;height:100px; Firefox,Chrome Google,Safari等浏览器的显示效果如图0-0: 图0-0 但是IE这个异类不支持CSS3的这个属性,在IE…