11-13 CSS 高级

2018-11-13 本文已影响0人忆往昔Code

一：CSS 水平对齐
1:使用 margin 属性来水平对齐
除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
如果宽度是 100%，则对齐没有效果

2:使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位：

实例
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
3:使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性：

实例
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

1:[使用像素值设置图像的高度]
img.normal
{
height: auto
}

img.big
{
height: 160px
}

img.small
{
height: 30px
}
2:[使用百分比设置图像的高度]----》%50.。。。
3:同理也可以设置宽度同样的方法
4:[设置元素的最大高度]
p
{
max-height: 10px
}
5:[使用像素值来设置元素的最小宽度]
p
{
min-height: 100px
}
6:[使用像素值设置行间距]
p.small
{
line-height: 10px
}
p.big
{
line-height: 30px
}

三：CSS 分类
CSS 分类属性允许你规定如何以及在何处显示元素。
1:[把元素显示为内联元素]
p {display: inline}
div {display: none}
本例中的样式表把段落元素设置为内联元素。而 div 元素不会显示出来！
2:[把元素显示为块级元素]
span
{
display: block
}
本例中的样式表把 span 元素设置为块级元素。
两个 span 元素之间产生了一个换行行为。

3:float属性应用，图片浮动在段落的右边（前面有demo）
img
{
float:right
}

4:[定位：相对定位]--相对于一个元素的正常位置来对其定位。
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
5:[定位：绝对定位]
通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
6:[定位：固定定位]
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
7:[如何使元素不可见]
h1.visible {visibility:visible}
h1.invisible {visibility:hidden}

8:[把表格元素设置为 collapse]---》本身两个表格如果一个设置为collapse 那么这个奖重叠到下面被遮挡。
tr.coll
{
visibility:collapse
}

9:[改变光标]----》鼠标移动上面显示的类型
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

10:[清除元素的侧面]---》意思是如果两个图片选择clear both的话那么右侧是被清除的导致两个图片上下排列不会左右排列。
img
{
float:left;
clear:both;
}
| 属性 | 描述 |
| [clear] 设置一个元素的侧面是否允许其他的浮动元素。 |
| [cursor]| 规定当指向某元素之上时显示的指针类型。 |
| [display]| 设置是否及如何显示元素。 |
| [float] 定义元素在哪个方向浮动。 |
| [position] 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| [visibility] 设置元素是否可见或不可见。 |

三：CSS 导航条

1:垂直导航栏
链接 href
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
从列表中去掉圆点和外边距：
ul
{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
2:水平导航栏
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
<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>
3:对列表项进行浮动
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
效果：

屏幕快照 2018-11-13 下午3.54.19.png

四：CSS 图片库
前言：
div.img 是对div修饰的 div.img img是对image修饰的
div.img img
div下class为img的标签下的img标签
这样说可能不太明白
拆开来说就是
所有div标签下的class为img的标签 class为img的标签下的img标签
如果还不明白的话
举个例子
<div>
<div class="img">
<img />
</div>
</div>
http://www.w3school.com.cn/tiy/t.asp?f=css_image_gallery

五：CSS 图像透明度
定义透明效果的 CSS3 属性是 opacity。
1:[创建透明图像 - Hover 效果]
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier /
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); / For IE8 and earlier */
}
2:[创建文本在背景图像上的透明框]
http://www.w3school.com.cn/tiy/t.asp?f=css_transparency

六:CSS2 媒介类型
CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。

媒介类型描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。

11-13 CSS 高级

猜你喜欢

热点阅读