文本设置：
1. font-size：设置字号大小
2. font-style：字体样式
3. font-weight：字体粗细
4. font-family : 指定文本的字体系列
所有css文本属性：
所有css字体属性：
超链接设置
text-decoration: 设置是否显示下划线
参数：
underline：为文字加下划线
overline：为文字加上划线
line-through：为文字加删除线
blink：使文字闪烁
none：不显示上述任何效果
css连接：
状态：
a:link. 正常，未被访问过的连接
a:visited. 用户已访问过的连接
a:hover 当鼠标放在连接上时
a:active 连接被点击时
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
注意： a:active 必须在 a:hover 之后
背景
1. background-color : 背景颜色
2. background-image:背景图片
参数：URL就是背景图片的存放路径，none表示无
3、背景图片重复
background-repeat: 参数
参数取值范围 ：
no-repeat：不重复平铺背景图片
repeat-x：使图片只在水平方向上平铺
repeat-y：使图片只在垂直方向上平铺
如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
4、背景图片固定
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定
background-attachment: 参数
参数取值范围：
fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
区块
1、单词间距
word-spacing: 间隔距离
2、字母间距
letter-spacing: 字母间距
阴影效果
text-shadow
3、文本对齐
text-align: 参数
参数的取值：
left：左对齐
right：右对齐
center：居中对齐
justify：相对左右对齐
4、垂直对齐
vertical-align: 参数
top：顶对齐
bottom：底对齐
text-top：相对文本顶对齐
text-bottom：相对文本底对齐
baseline：基准线对齐
middle：中心对齐
sub：以下标的形式显示
super：以上标的形式显示
5、文本缩进
text-indent: 缩进距离
12px相当于一个文字距离
6、空格
white-space: 参数
normal 正常
pre 保留
nowrap 不换行
7、显示样式
display: 参数
参数取值范围：
block：
inline：
list-item：
none：
方框
1、height 高度2、width 宽度
3、padding 内边距
4、margin 外边距
5、float（浮动）：可以让块级元素在一行中排列，例如横向菜单。
6、clear 清除浮动
边框
1、样式border style 参数
边框样式的参数：
none：无边框
dotted：边框为点线
dashed：边框为长短线
solid：边框为实线
double：边框为双线
2、宽度
border width 参数
3、颜色
border color 参数
列表
list-style-type 列表样式不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示。
控制用户界面的样式
鼠标
cursor：鼠标形状参数CSS鼠标形状参数表：
html常用代码：
贴图：<img src="图片地址">
加入连接：<a href="所要连接的相关地址">写上你想写的字</a>
在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>
移动字体(走马灯)：<marquee>写上你想写的字</marquee>
字体加粗：<b>写上你想写的字</b>
换行：<br>
段落：<p>段落</p>
原始文字样式：<pre>正文</pre>
点击关闭窗口
<a href="javascript:window.close();">点击关闭</a><body style="overflow-y: hidden; ">跑马灯：
不同的列表项标记
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</body>也可以使用列表标记等图像：
ul{
list-style-image:url('/statics/images/w3c/sqpurple.gif');
}边框属性：border-style
Margin属性
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
padding内边距也是同理。
隐藏元素
display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局.
css display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符
例如： <h1>. <p> <div> <li>
内联元素只需要必要的宽度，不强制换行。
例如： <span> <a>
实例：
本来如果不添加display:inline，这句话，li排列是横向排列的。添加内联后，可以实现行内不换行
<ul id="fadhgiasga">
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
<style type="text/css">
#fadhgiasga li{
display: inline;
}
</style>position定位
定位方式：
static定位：默认的方式，即没有定位。
fixed定位：元素的位置相对于浏览器窗口是固定位置。
窗口变化它不会移动。
relative定位：相对定位。如果窗口大小调整了，它也会跟着调整，比如，一排有四张图片，当浏览器的窗口缩小长度后，原来的四张图片可能放下三张，还有一张移动到下一行。
Absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
重叠元素：
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/attachments/cover/cover_cssref.jpeg" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
css3中的组合选择器：
在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
后代选择器：
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div></body>子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。这里的孩子必须是直接子孩子，不能嵌套多层。
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
下来菜单
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
<style type="text/css">
ul{
margin-left: 50px;
display: inline-block;
background-color: #333;
overflow: hidden;
list-style-type: none;
padding-left: 0px;
}
li{
float: left;
}
li>a , .dropbtn{
display: inline-block;
color: white;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
li a:hover,.dropdown:hover .dropbtn{
background-color: #111;
}
.dropdown{
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a{
color: black;
display: block;
padding: 12px 16px;
text-decoration: none;
}
.dropdown-content a:hover{
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content{
display: block;
}
</style>
</body>图片透明设置：
css3中的属性透明设置：opacity 。取值为 0 ～ 1之间。
css的媒体类型：
@media规则：
@media 规则允许在相同样式表为不同媒体设置不同的样式
响应式web设计：
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0">
响应式设计----网格视图
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩
创建响应式网格视图
首先要确保所有的html元素都有box-size属性，并且属性值为border-box。
* {
box-sizing: border-box;
}这里的值有几种不同的取值：
响应式设计--媒体查询
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
等等还有一些属性值。
方向：
orientation：portrai | landscape例如：如果是竖屏就将背影设置为浅蓝色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}响应式设计 --- 图片
如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：
img {
width: 100%;
height: auto;
}图片会根据窗口调整大小。
但是图片可能会比原始的要大。可以设置max-width属性。
使用max-width属性：
如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小，当窗口比图片小的时候，图片会根据创建调整和缩小。
img {
max-width: 100%;
height: auto;
}背景图片
背景图片可以响应调整大小或缩放。
以下是三个不同的方法：
1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变
css代码
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}2. 如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域
3. 如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此背景图像的某些部分无法显示在背景定位区域中。
不同设备显示不同图片
大尺寸图片可以显示在大屏幕上，但在小屏幕上确不能很好显示。我们没有必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}这里可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变
/* 设备小于 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* 设备大于 400px (也等于): */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}HTML5 <picture>元素
HTML5 的 <picture>元素可以设置多张图片
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>srcset 属性的必须的，定义了图片资源。
media 属性是可选的。
响应式设计 ---- 视频
width属性：
如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例
video {
width: 100%;
height: auto;
}更多情况下，我们使用max-width这个属性。如果 max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小
video {
max-width: 100%;
height: auto;
}css居中的方法：
文字水平和垂直居中：
<body>
<div class="wrap">w3cschool</div>
<style type="text/css">
.wrap{
line-height: 100px; /*这里是垂直居中的关键*/
text-align: center;
height: 100px;
font-size: 36px;
background-color: #ccc;
}
</style>
</body>
扫一扫
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
