1、和链接（<a>标签）相关的a:link--定义未访问的链接；a:visited--定义已经访问（根据浏览器中的历史记录）的链接；a:hover--定义鼠标滑过时的样式；a:active--定义鼠标单击时的样式2、和段落（<p>标签）相关的:first-letter 创建下落的首字母，使得首字母更大更粗（只能用于块级元素）；:first-line 用一种不同的颜色定义首行在CSS3中为了区分伪类和伪元素，表示时在伪元素前面加两个冒号，如下： ::first-letter和::f...
一、元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距 内容与边框之间的距离 4.margin控制元素外边距 元素边框与其他元素边框之间的距离，如果两元素都设置了margin属性，浏览器只 对较大值有效。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>div{ width:100px;height:50px;padding:20px;margin:20px;background-color:#ccc...
很多人喜欢在body中加样式来控制全局字体的样式，像字体、大小、颜色等。这些写可以减少代码，其实并不然，像表单里面元素就无法继承body的字体属性，先看下效果截图:下面是BODY样式写法：<style type="text/css"><!--body { font-family: Arial, Helvetica, sans-serif; font-size:12px;}--></style>上面效果截图中表单里文本框的字面和表格字体并不是一样的效果，为什么会这样呢？是因为所有的表单元素都不继承body的字体属...
环境 xp ie 8 , ietester<!doctype html><html><head><meta charset="utf-8"/><style rel="stylesheet" type="text/css">*{font-size:19px;}i{color:red; font-weight:bold; margin:0 10px;}b{color:#BF7C17; margin:0 10px;}h2,p{padding:20px;}h2{background:#eee; font-size:20px;}p{font-size:15px;}p[attr]{color:blue;}p[attr="bar"]{color:pink;}p[attr~="go"]{color:green;}p[attr|="some"]{color:red;}.subEle > span { ...
比较选择器优先级检验方法如下将所有选择器应用到一个超链接上，观察结果，得出结论。输出结果为，说明行间style的优先级是其中最高的。去掉行间style代码：输出结果：后代选择器生效，注释其代码，继续比较：得出输出结果，注释代码。得出输出结果。 从上面结果不难看出 行间style > 后代 > id > class > 元素那么为什么会是这样的结果呢，判断优先级，以权重为指标，权重越大优先级越高：一般约定 id选择器的权重为100，类选择器...
---恢复内容开始---CSS 定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相...
原文:CSS中使用文本阴影与元素阴影文本阴影介绍#在CSS中使用text-shadow属性设置文本阴影，该属性一共有4个属性值如：水平阴影、垂直阴影、（清晰度或模糊距离）、阴影颜色。text-shadow属性值说明，在文本阴影实践中：第一个值是设置阴影水平方向移动，第二个值是设置阴影垂直方向移动，第三个值是设置阴影模糊距离，第四个值是设置阴影颜色。text-shadow属性值可以设置为负数。文本可以设置多个阴影以逗号分隔即可。Copytext-sha...
id、class都是web元素的属性，因为他们是很常用的属性，所以css选择器专门提供了根据id、class选择的语法。那么其他的属性呢？比如：<a href="https://www.baidu.com"> 百度</a> 根据href选择，也可以使用css选择器 css选择器支持通过任何属性来选择元素，语法是用一个方括号[ ]比如：要选择上面的 a元素，可以使用 [ href = "https://www.baidu.com" ] 即选择属性href值为 https://www.baidu.com 的元素当然，前面可以加上css表达...
一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius 圆角4.2、边框图片border-image五、变形 transform5.1、rotate()2D旋转5.2、设置原点 transform-origin 5.3、平移 translate() 5.4、缩放 scale5.5、斜切扭曲skew 六、渐变七、透明7.1、opacity7.2、transparent与图片透明7.3、RGBA八、动画8.1、过渡动画8.2、...
按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？ 有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，...
在JS给元素设置样式属性值，我们只能通过curEle.style[attr] = value 这种方式给元素设置行内样式下面封装一个给当前元素的某一个样式属性设置值的方法（增加在行内样式上的）：setCss()function setCss(curEle,attr,value){//在JS中设置float样式值也需要处理兼容if(attr==="float"){curEle["style"]["cssFloat"] = value;curEle["style"]["styleFloat"] = value;return;}//如果打算设置的是元素的透明度，我们需要设置两套样式来...
伪元素：（css3中将所有伪元素前变成了两个冒号，即::first-letter、::first-line、::before、::after、::selection。目的是为了区分伪元素与伪类。对于IE6~IE8，仅支持单冒号写法）1.::first-letter ：用来选择文本块的第一个首字母。2.::first-line ：用来匹配元素的第一行文本。3.::befor 和 ::after ：创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。:before...
div#div1>ol>li.id*4 tab键 <div id="div1"><ol><li id="id"></li><li id="id"></li><li id="id"></li><li id="id"></li></ol></div>div.main>ul>li.c*4 tab键 <div class="main"><ul><li class="c"></li><li class="c"></li><li class="c"></li><li class="c"></li></ul></div> 原文：https://www.cnblogs.com/icemonkey/p/10495079.html
做诸葛书的时候遇到一个问题，就是我插入的元素在端上设备分页被切断，显示很丑。最后优秀的产品同学告诉我第一版用到一个神奇的属性，容器中途分割 | break-inside。.actionDom{-webkit-column-break-inside: avoid;page-break-inside: avoid;break-inside: avoid; }break-insideCSS属性定义页，列或区域断裂的行为方式产生的箱内。如果没有生成的框，则忽略该属性。参考文献：容器中途分割https://cloud.tencent.com/developer/s...
最近在读《Basic Visual Formatting in CSS》，结合以前看的《css权威指南》和css标准。今天就做个笔记。 以前在遇到一些宽度不明确指明的一些布局的时候，虽然凭感觉能猜出个大概，但是总是有点不是很靠谱。直到最近看到这一本书，觉得总觉得挺好的。 首先要知道，元素除了通过display来指定block、inline、inline-block这一些属性之外，还有一种能在的特性--替换还是非替换。 替换元素：像img、video、canvas等稳定...