- Foundation CSS 可见性 11-25
- CSS background-attachment 11-25
- HTML5小白学习笔记——DAY3：CSS属性 11-25
- CSS border-color 属性 11-25
- CSS选择器 11-25
- CSS伪类选择器 11-25
- CSS vertical-align 属性 11-25
- CSS：外边距合并 11-25
- CSS list-style-image 属性 11-25
- CSS min-width 属性 11-25
Foundation CSS 可见性
发布者: superzhang | 发布时间:2017-11-25根据屏幕尺寸显示元素
以下类会根据设备(屏幕尺寸)来显示元素。
类描述.show-for-small-only只在小型设备上显示元素 (屏幕宽度小于 40.0625em ).show-for-medium-up在中型及以上设备上显示元素 (屏幕宽度大于 40.0625em).show-for-medium-only只在中型设备上显示元素 (屏幕宽度在 40.0625em 到 64.0625em 之间).show-for-large-up在大型及以上设备上显示元素 (屏幕宽度大于 64.0625em).show-for-large-only只在大型设备上显示元素 (屏幕宽度在 64.0625em 到 90.0625em 之间).show-for-xlarge-up在更大型及以上设备上显示元素 (屏幕宽度大于 90.0625em).show-for-xlarge-only只在更大型及以上设备上显示元素 (屏幕宽度在 90.0625em 到 120.0625em之间).show-for-xxlarge-up在超大型及以上设备上显示元素 (屏幕宽度大于 120.0625em)以下实例演示了以上所有 .show- 类的可见性。
<p class="show-for-small-only">你在小型设备上。</p>CSS background-attachment 属性
发布者: superzhang | 发布时间:2017-11-25实例
如何指定一个固定的背景图像：
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
标签定义及使用说明
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
默认值:scroll继承:no版本:CSS1JavaScript 语法:objectobject.style.backgroundAttachment="fixed"HTML5小白学习笔记——DAY3：CSS属性
发布者: superzhang | 发布时间:2017-11-25<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS核心属性</title>
<style>
*{ margin:0; padding:0;}
body{ background: #F5F6EB; color: #333; font-size: 16px;}
.boxs{ width:1000px; margin:0 auto; }
h1,h2{pad
CSS border-color 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置四个边框颜色：
p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
属性定义及使用说明
border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。
实例:
border-color:红，绿，蓝,粉红色;
上边框是红色
右边框是绿色
底部边框是蓝
左边框是粉红色
border-color：红，绿，蓝;
上边框是红色
左，右边框是绿色
底部边框是蓝
border-color：红，绿;
顶部和底部边框是红色
左右边框是绿色
border-color：红色;
所有四个边框是红色
注意：请始终把 border-style 属性声明到 border
CSS选择器
发布者: superzhang | 发布时间:2017-11-25一、标签选择器
li{color: blue; font-size: 35px;}
选择标签名为li的元素
二、id选择器
#two{ color: red; }
#two选择的是id为two的元素
三、class选择器
.ls{color: green;}
.ls选择的是class为ls的元素
四、交叉选择器
p.ls{ color: purple;}
p.ls选择的是标签是p，并且class是ls的元素
注意：交叉选择器中间没有空格，即p和.ls之间没有空格
五、子代选择器
li span{color: orange;font-size: 50px; }
li span选择的是li标签里面的span标签
注意：子代选择器中间有空格，即li 和span 之间有空格
六、群选择器
.ls,span{ color: yellow; }
.ls,span选择的是class为ls的标签和标签为span的元素
七、通用选择器
*{ color: yellow; }
选择HTML文档body内的所有标签
例：1 d
CSS伪类选择器
发布者: superzhang | 发布时间:2017-11-25CSS伪类，是一种特殊的类，它针对到CSS选择器起作用，使选中的标签产生特定效果。
CSS伪类语法：选择器：伪类名{属性：属性值}
用的最多的伪类就是超链接a的伪类，有:link，:visited，:hover，:active，而且需要按照这个顺序设置，有个简单记忆是，取首字母组成 love hate，记住“爱恨”就行了。
下面举例说明
HTML代码：
<a>没有href的a标签,字体没有修饰，鼠标放上去也没反应</a>
<a href="#" target="_blank">href为#号的a标签，鼠标放上去变成手</a>
<a href="http://www.baidu.com" target="_blank">href为正常网址的a标签，鼠标放上去变成手</a>
CSS代码：
a{text-decoration: none;}
a:link { color: red;}
a:visited { color: green;}
a:hover { color: orange;}
a:active { color: yellow;}<
CSS vertical-align 属性
发布者: superzhang | 发布时间:2017-11-25实例
垂直对齐图像：
img
{
vertical-align:text-top;
}
属性定义及使用说明
vertical-align属性设置一个元素的垂直对齐。
默认值：baseline继承：no版本：CSS1JavaScript 语法：object.style.verticalAlign="bottom"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性vertical-align1.04.01.01.04.0按照上面的例子可以得出，两个p元素之间距离为30px。
这种情况又可以分为以下两种：
父元素的上外边距和第一个子元素的上外边距
父元素的下外边距和最后一个子元素的下外边距
这两种情况，最终显示出来的结果都是取二者中的最大值。
空元素自己的上外边距会和自己的下外边距合并
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p><div style="margin-top: 20px; margin-bottom: 20px;"></diCSS list-style-image 属性
发布者: superzhang | 发布时间:2017-11-25实例
指定列表中的列表项标记的图像：
ul
{
list-style-image:url('sqpurple.gif');
}
属性定义及使用说明
list-style-image 属性使用图像来替换列表项的标记。
注意: 请始终规定一个 "list-style-type" 属性以防图像不可用。
默认值：none继承：yes版本：CSS1JavaScript 语法：object.style.listStyleImage="url('/images/blueball.gif')"浏览器支持
表格中的数字表示
CSS min-width 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置段落的最小宽度：
p
{
min-width:1000px;
}
属性定义及使用说明
min-width属性设置元素的最小宽度。
注意： min-width属性不包括填充，边框，或页边距！
默认值：0继承：no版本：CSS2JavaScript 语法：object.style.minWidth="10px"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性min-width1.07.01.02.0.24.0
自由职业者-张超:"一切皆有可能" 邮箱: e@izhangchao.com
Copyright 2013~2019. All right reserved. Powered by www.izhangchao.com 粤ICP备11023575号-5