文本设置:
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>