选择器 *代表所有 *{}
派生选择器 div {color:red;}
id选择器 #t_id {color:red;}
类选择器 .tclass {color:red;}
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
<p class="important"></p>
<p class="warning"></p>
<p class="important warning"></p>
属性选择器 [attribute] [attribute=value]
后代选择器 div strong {color:red;} 在<div>中选择所有的<strong>不管<strong>被嵌套了几层。
子选择器 div>strong {color:red} 只选<div>下的<strong>,即<div><div><strong></strong></div></div>将无效
相邻兄弟选择器 div + strong {color:red;} , <strong>紧接<div>后,且二者有相同父元素
伪类
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
伪元素
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |
背景
body { background-image:url('/i/eg_bg_03.gif'); //图片定义 background-repeat:no-repeat; //重复定义,no-repeat 不重复,repeat重复,repeat-y竖直重复background-position:center; //对其定义,也可以用百分比 50% 50%
background-attachment: fixed; //fixed页面滚动时。背景不滚动,scroll随页面滚动,inherit继承父元素的attachment属性
} 也可以写扎起一行内:background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
文本
p.ex {color:rgb(0,0,255)} //字体颜色
span.highlight {background-color:yellow} //背景色
h1 {letter-spacing: -0.5em} //规定字符间距
h4 {letter-spacing: 20px} //规定字符间距
p {word-spacing: 30px;} //增加行间距
p.big {line-height: 200%} //设置行高
h1 {text-align: center} //对齐文本
h1 {text-decoration: overline} //修饰文本 overline:上划线,line-through:删除线,underline:下划线,blink:闪烁
p {text-indent: 1cm} //文本缩进
h1 {text-transform: uppercase} //大写:uppercase,小写:lowercase,首字母大写:capitalize
p{white-space: nowrap} //禁止文本拆行
direction //设置文本方向
字体
font-family:字体样式
font-size:字体大小 W3C推荐使用em,1em=16px
font-style:字体风格
font-variant:字体异体
font-weight:字体粗细
将所有属性在一个申明中:p {font: italic arial,sans-serif;}
连接
a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
列表
ul {list-style-type : square} 声明把无序列表中的列表项标志设置为方块
ul li {list-style-image : url(xxx.gif)} 列表图像
li {list-style : url(example.gif) square inside} 简写
轮廓(Outline)
outline | 在一个声明中设置所有的轮廓属性。 | 2 |
outline-color | 设置轮廓的颜色。 | 2 |
outline-style | 设置轮廓的样式。 | 2 |
outline-width | 设置轮廓的宽度。 | 2 |
框模型
padding |
简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
margin也一样
边框
border | 简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style | 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom | 简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color | 设置元素的下边框的颜色。 |
border-bottom-style | 设置元素的下边框的样式。 |
border-bottom-width | 设置元素的下边框的宽度。 |
border-left | 简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color | 设置元素的左边框的颜色。 |
border-left-style | 设置元素的左边框的样式。 |
border-left-width | 设置元素的左边框的宽度。 |
border-right | 简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color | 设置元素的右边框的颜色。 |
border-right-style | 设置元素的右边框的样式。 |
border-right-width | 设置元素的右边框的宽度。 |
border-top | 简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color | 设置元素的上边框的颜色。 |
border-top-style | 设置元素的上边框的样式。 |
border-top-width | 设置元素的上边框的宽度。 |
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
定位
使用 position 属性进行对齐时,请始终包含 !DOCTYPE 声明!如果省略,则会在 IE 浏览器中产生奇怪的结果。
static relative absolute fixed
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素的垂直对齐方式。 |
z-index | 设置元素的堆叠顺序。 |
当使用 float 属性时,请始终设置 !DOCTYPE 声明
css做导航
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
图片透明
img { opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */ }
@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。
<style>@media screen
{ p.test {font-family:verdana,sans-serif; font-size:14px} }@media print
{ p.test {font-family:times,serif; font-size:10px} }@media screen,print
{ p.test {font-weight:bold} } </style>
all | 用于所有的媒介设备。 |
aural | 用于语音和音频合成器。 |
braille | 用于盲人用点字法触觉回馈设备。 |
embossed | 用于分页的盲人用点字法打印机。 |
handheld | 用于小的手持的设备。 |
用于打印机。 | |
projection | 用于方案展示,比如幻灯片。 |
screen | 用于电脑显示器。 |
tty | 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。 |
tv | 用于电视机类型的设备。 |
css边框
div { border-image:url(border.png) 30 30 round; -moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }
border-image | 设置所有 border-image-* 属性的简写属性。 | 3 |
border-radius | 设置所有四个 border-*-radius 属性的简写属性。 | 3 |
box-shadow | 向方框添加一个或多个阴影。 | 3 |
背景
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
新的文本属性
h1{text-shadow: 5px 5px 5px #FF0000;} //阴影效果
hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
text-outline | 规定文本的轮廓。 | 3 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
text-wrap | 规定文本的换行规则。 | 3 |
word-break | 规定非中日韩文本的换行规则。 | 3 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
css3新字体定义
<style>
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
,url('/example/css3/Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
|
可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
|
可选。定义字体的样式。默认是 "normal"。 |
font-weight |
|
可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
2d转换
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
- translate() 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
- rotate() 元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转
- scale() 元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
- skew() 元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
- matrix() 把所有 2D 转换方法组合在一起,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
3d转换
- rotateX() 元素围绕其 X 轴以给定的度数进行旋转。
- rotateY() 元素围绕其 Y 轴以给定的度数进行旋转。
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
css过渡
div { transition: width 2s; /* 时长3秒 */ -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
<div>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</div>
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
css动画
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
多列
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
</style>
column-count | 规定元素应该被分隔的列数。 | 3 |
column-fill | 规定如何填充列。 | 3 |
column-gap | 规定列之间的间隔。 | 3 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
column-rule-color | 规定列之间规则的颜色。 | 3 |
column-rule-style | 规定列之间规则的样式。 | 3 |
column-rule-width | 规定列之间规则的宽度。 | 3 |
column-span | 规定元素应该横跨的列数。 | 3 |
column-width | 规定列的宽度。 | 3 |
columns | 规定设置 column-width 和 column-count 的简写属性。 | 3 |
用户界面
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
//可调尺寸
div { border:2px solid black; outline:2px solid red; outline-offset:15px; } //轮廓
appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
box-sizing | 允许您以确切的方式定义适应某个区域的具体内容。 | 3 |
icon | 为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 |
nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
nav-index | 设置元素的 tab 键控制次序。 | 3 |
nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
nav-right | 规定在使用 arrow-right 导航键时向何处导航。 | 3 |
nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
outline-offset | 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 | 3 |
resize | 规定是否可由用户对元素的尺寸进行调整。 | 3 |
相关推荐
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同,导致设计师在没有定义某个CSS属性时,不同的浏览器会按照自己的默认值来为没有定义的样式赋值,所以我们要先定义好一些CSS样式,来让所有浏览器都按照同样的...
9. **性能优化**:合理的div+css布局也应考虑性能,如减少CSS选择器的复杂性、优化图片和字体资源、使用适当的布局方法等,以提升页面加载速度和用户交互体验。 10. **浏览器兼容性**:尽管现代浏览器对CSS的支持...
因此,在使用`reset.css`时,最好结合`normalize.css`或现代的CSS重置方法,如`Eric Meyer Reset`或`sanitize.css`,它们不仅重置样式,还会保留一些有助于无障碍浏览和语义化的默认样式。 在实际项目中,可以将`...
在创建BIRT报表时,CSS(Cascading Style Sheets)样式起到了至关重要的作用,它们用于控制报表的外观和布局,使其符合用户界面的需求。本主题将深入探讨“birt公用CSS样式”,并结合提供的文件内容进行详细说明。 ...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
在前端开发领域,CSS Variables(也称为CSS自定义属性)是一种强大的工具,它允许开发者在整个样式表中定义和重用变量。PostCSS 是一个JavaScript工具,它可以解析CSS,执行一些任务,然后输出新的CSS。Postcss-css-...
HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...
《div+css手册》是一本深入探讨网页布局技术的重要参考资料,尤其对于网页设计者和前端开发者来说,它具有极高的学习价值。这个手册的核心聚焦在HTML中的`div`元素和CSS(层叠样式表)的结合使用上,旨在帮助读者...
CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效.rar CSS3风水罗盘旋转动画特效....
我们用pycharm写CSS的时候,是不是苦于没有提示,那么pycharm中如何显示CSS提示呢?下面小编给大家分享一下。 首先点击左上角的file菜单,选择Setting 接着选择Editor下面的Inspections选项,如下图所示 然后在...
9个网页布局,学校让做的网站作业,虽然是比较基础的网页静态页面,不过我也希望你能做的规范一些,我们专业制作学生网页作业,div css js 等通过dreamwear的工具实现规范化,比如文件夹的规范,代码写作的规范,...
《CSS权威指南》第四版是CSS领域的重要著作,作者Eric A. Meyer凭借其深厚的行业经验和智慧,对CSS的各个方面进行了详尽的探讨。 本书从基础讲起,逐步深入到CSS的核心概念与应用。CSS权威指南第四版涵盖了CSS的...
就比如我在css目录下面写了一个css样式文档:style.css。这时里面只有一句话: XML/HTML Code复制内容到剪贴板 body { background-color: #ddd; } 然后再我的html文件里面去引入这个外部css: XML/...
CSS3参考手册(css3语法使用查询手册)CHM版,可快速索引和搜索CSS3各种属性值以及具体的用法,说详细介绍有CSS3选择器的各方面知识,这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
【CSS新世界1】这本书是关于CSS3的深入探索,主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景,强调了模块化带来的灵活性和扩展性,让读者对CSS3有一个整体的认识。接着,作者详细讲解了...
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...