一、宽和高

二、字体属性

1. 文字字体 font-famlly

2. 字体大小 font-size

3. 字重(粗细) font-weight

4. 文本颜色 color

三、字符属性

1. 文字对齐 text-align

2. 文字装饰 text-decoration

一、宽和高

width：设置属性宽度，宽度向右填充空格，块级标签才可设置宽度，内联标签的宽度度由内容来决定.
heigth：设置属性高度，高度向下填充空白.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        #tag {





            width: 20%;





            height: 10px;





        }





        p {





            width: 31px;





        }





    </style>





</head>





<body>





<div>





    <p id="tag">劫过九重城关</p>





    <p>我座下马正酣</p>





</div>





</body>





</html>

二、字体属性

1. 文字字体 font-famlly

可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，浏览器会使用它可识别的第一个值.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        body {





            /*font-family*/





            font-family: "Mircrosoft Yahei", "微软雅黑", "Arial", "sans-serif";





            color: yellowgreen;





        }





    </style>





</head>





<body>





<div>





    <p>看那轻飘飘的衣摆</p>





    <p>趁擦肩把裙掀</p>





</div>





</body>





</html>

2. 字体大小 font-size

大小有px、%之分，16px与100%为默认字体大小.

如果值为 inherit 则继承父元素的字体大小.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        div {





            font-size: 16px;    /*font-size*/





            color: darkcyan;





        }





    </style>





</head>





<body>





<div>





    <p>踏遍三江六岸</p>





    <p>借刀光做船帆</p>





</div>





</body>





</html>

3. 字重(粗细) font-weight

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100～900	设置具体粗细，400为normal，700为bold
inherit	继承父元素字体的粗细值






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        /*font-weight*/





        p {





            font-weight: lighter;





        }





        #tag {





            font-weight: 700;





        }





    </style>





</head>





<body>





<div>





    <p>任露水浸透了短衫</p>





    <p id="tag">大盗睥睨四野</p>





</div>





</body>





</html>

4. 文本颜色 color

color属性用来设置字符的颜色，是CSS最常用的属性.

十六进制值（如：#FFFFFF，可简写为FFF）
RGB值（如：rgb(255,0,0)）
颜色名称（如：blue）
还有rgba(255,0,0,0.5)，第四个值为alpha，用于指定色彩的透明/不透明度，范围在0.0-1.0之间






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        #tag1 {color: #A9A9A9;} /*十六进制值，可简写*/





        #tag2 {color: rgb(150,100,0);} /*RGB值*/





        #tag3 {color: darkgrey;} /*颜色名称*/





        #tag4 {color: rgba(150,100,0,0.5);} /*rgba*/





    </style>





</head>





<body>





<div>





    <p id="tag1">枕风宿雪多年</p>





    <p id="tag2">我与虎谋早餐</p>





    <p id="tag3">拎着钓叟的鱼弦</p>





    <p id="tag4">问卧龙几两钱</p>





</div>





</body>





</html>

三、文字属性

1. 文字对齐 text-align

值	描述
left	左对齐，默认值
right	右对齐
center	居中对齐
justify	两端对齐






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        #tag1 {text-align: left;} /*左对齐*/





        #tag2 {text-align: right;} /*右对齐*/





        #tag3 {text-align: center;} /*居中对齐*/





        #tag4 {text-align: justify;} /*两端对齐*/





    </style>





</head>





<body>





<div>





    <p id="tag1">蜀中大雨连绵</p>





    <p id="tag2">关外横尸遍野</p>





    <p id="tag3">你的笑像一条恶犬</p>





    <p id="tag4">撞乱了我心弦</p>





</div>





</body>





</html>

2. 文字装饰 text-decoration

值	描述
none	标准文本，默认值常用于去掉a标签默认的下划线
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本的一条线
inherit	继承父元素






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        #tag1 {text-decoration: none;} /*标准文本*/





        #tag2 {text-decoration: underline;} /*下划线*/





        #tag3 {text-decoration: overline;} /*上划线*/





        #tag4 {text-decoration: line-through;} /*删除线*/





        a {text-decoration: none;} /*去掉a标签默认的下划线*/





    </style>





</head>





<body>





<div>





    <p id="tag1">谈花饮月赋闲</p>





    <p id="tag2">这春宵艳阳天</p>





    <p id="tag3">待到梦醒时分睁眼</p>





    <p id="tag4">铁甲寒意凛冽</p>





    <a href="https://blog.csdn.net/qq_41964425" target="_blank">CSDN</a>





</div>





</body>





</html>

3. 首行缩进 text-indent

常用的有像素(px)、百分比(%)，默认缩进值都为零.






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>CSS</title>





    <style>





        #tag1 {text-indent: 32px;} /*将段落的第一行缩进32像素*/





        #tag2 {text-indent: 32%;} /*将段落的第一行缩进32百分比*/





    </style>





</head>





<body>





<div>





    <P id="tag1">夙愿只隔一箭</P>





    <p id="tag2">故乡近似天边</p>





</div>





</body>





</html>

四、背景

操作解释

background-color: red; 将背景颜色设为红色

bsckground-image: url("test.jpg"); 将test.jpg图片设为网页背景

background-position: right top; 图片位置：右上

还可写成像素百分比等

background-position

背景重复，值如下：

repeat：平铺整个网页，默认值

repeat-x：水平方向平铺

		<p>repeat-y：垂直方向平铺<br>

		no-repeat：背景图片不平铺</p>

		</td>

	</tr></tbody></table></div><p><strong>简写：</strong><span style="color:#86ca5e;">background: green&nbsp;url("test.jpg") no-repeat </span><span style="color:#86ca5e;">center center;</span></p>

很多网站会把一些小图标放在一张图片上，然后根据位置去显示图片，从而减少频繁的图片请求.

一个有趣的例子：鼠标滚动背景不动：






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>鼠标滚动背景不动</title>





    <style>





        * {





            margin: 0;





        }





        .tag1 {





            width: 3%;





            height: 200px;





            background-color: antiquewhite;





        }





        .tag2 {





            color: white;





            width: 100%;





            height: 300px;





            background:





                    url("http://img3.imgtn.bdimg.com/it/u=1167730288,2455334783&fm=26&gp=0.jpg")





                    no-repeat center center;





            background-attachment: fixed; /*鼠标滚动背景不动*/





        }





        .tag3 {





            height: 200px;





            text-align: right;





            background-color: aquamarine;





        }





        .tag4 {





            height: 200px;





            text-align: right;





            background-color: steelblue;





        }





    </style>





</head>





<body>





    <div class="tag1">不知何人浅唱弄弦</div>





    <div class="tag2">我彷徨不可前</div>





    <div class="tag3">枕风宿雪多年</div>





    <div class="tag4">我与虎谋早餐</div>





</body>





</html>

五、边框

简写：border: 2px dashed blue;

还可以单独为某一个边框设置样式：

简写：border-left: 2px dotted green;






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>边框</title>





    <style>





        #tag1 {





            border-width: 3px; /*边框宽度*/





            border-style: dotted; /*边框类型*/





            border-color: cornflowerblue; /*边框颜色*/





        }





        #tag2 {





            border: 2px dashed mediumspringgreen; /*简写*/





        }





        /*单独为某个边框设置样式*/





        #tag3 {





            border-top-width: 2px;





            border-top-style: dotted;





            border-top-color: cornflowerblue;





            border-bottom-width: 2px;





            border-bottom-style: dashed;





            border-bottom-color: cornflowerblue;





        }





        /*单独为某个边框设置样式. 简写*/





        #tag4 {





            border-left: 2px dotted lightseagreen;





            border-right: 2px dotted lightseagreen;





            border-bottom: 2px solid mediumaquamarine;





        }





    </style>





</head>





<body>





<div>





    <p id="tag1">拎着钓叟的鱼弦</p>





    <p id="tag2">问卧龙几两钱</p>





    <p id="tag3">蜀中大雨连绵</p>





    <p id="tag4">关外横尸遍野</p>





</div>





</body>





</html>

六、圆形 border-radius

将其值设置为宽或高的一半即可得到一个圆形：






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>圆形</title>





    <style>





        #tag1 {





            text-align: center;





            width: 200px;





            border: 3px dotted darkviolet;





            border-radius: 50%; /*设置为宽或高的一半*/





        }





        #tag2 {





            text-align: center;





            width: 30px;





            height: 110px;





            border: 2px dashed hotpink;





            border-radius: 50%; /*设置为宽或高的一半*/





        }





        div {





            width: 150px;





            height: 150px;





            border: 2px solid lawngreen;





            border-radius: 50%; /*设置为宽或高的一半*/





        }





    </style>





</head>





<body>





    <div>





        <p id="tag1">你的笑像一条恶犬</p>





        <p id="tag2">撞乱我心弦</p>





    </div>





</body>





</html>

七、display 属性

值	描述
display: none;	使元素在网页中不显示，一般用于配合JavaScript代码使用
display: block;	默认占满整个页面宽度，如果指定了宽度，则会用margin填充剩下的部分
display: inline;	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom、float属性都不会有什么影响
display: inline-block;	使元素同时具有行内元素和块级元素的特点






<!DOCTYPE html>





<html lang="zh-CN">





<head>





    <meta http-equiv="content-Type" charset="UTF-8">





    <meta http-equiv="x-ua-compatible" content="IE=edge">





    <meta http-equiv="refresh" content="60; URL=https://blog.csdn.net/qq_41964425">





    <title>display属性</title>





    <style>





        #tag1 {





            display: block; /*占满整个页面宽度*/





        }





        #tag2 {





            display: inline; /*按行内元素显示*/





            height: 100px; /*此时无效*/





        }





        #tag3 {





            visibility: hidden; /*替换成空白*/





        }





        #tag4 {





            display: none; /*不显示*/





        }





    </style>





</head>





<body>





<div>





    <span id="tag1">烽烟万里如衔</span>





    <span>掷群雄下酒宴</span> <!--此时换行-->





    <p id="tag2">谢绝策勋十二转</p> <!--此时不换行-->





    <p id="tag3">想为你窃玉簪</p> <!--此时不显示（替换成空白）-->





    <p>入巷间吃汤面</p>





    <p id="tag4">笑看窗边飞雪</p> <!--此时不显示-->





</div>





</body>





</html>

display: none;与visibility: hidden;的区别：

visibity: hidden; ：可以隐藏某个元素，但隐藏的元素仍会占用隐藏之前的空间。也就是说，虽然该元素被隐藏的，但是仍然会影响布局。

display：none; ：隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

苦才是生活

累才是工作

变才是命运

忍才是历练

容才是智慧

静才是修养

舍才会得到

做才会拥有

【CSS属性#1】的更多相关文章

通过设置CSS属性让DIV水平居中
通过设置CSS属性让DIV水平居中 ---------------------- <html> <head> <title></title> <m ...
换行的css属性
//正常换行 word-break:keep-all;word-wrap:normal; //下面这行是自动换行 word-break:break-all;word-wrap:break-word ...
jquery css属性练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
animate支持的css属性
支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...
css属性的选择对动画性能的影响
现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...
CSS中浏览器开发商特定的CSS属性
浏览器制造商(像Microsoft.Mozilla等,还有WebKit的后台人员等)通常会为他们的浏览器增加新的功能来测试新的特性, 或者实现一直在考虑但还没有得到标准组织批准的CSS扩展.在这些情况 ...
css学习（2）-- 常见的CSS属性和值
1.CSS中修饰字体的属性属性描述属性值 font-family 字体族科任意字体族科名称都可以使用例如Times.serif等,而且多个族科的赋值是可以使用的,中间用 ...
css属性编写顺序+mysql基本操作+html细节（个人笔记）
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
那些年我们错过的超级好用的CSS属性
在看前辈写的CSS样式的时候发现好多之前都没用过的Css属性,现在看来有必要整理一下啦. 一.CSS选择器(http://www.w3school.com.cn/cssref/css_selector ...

随机推荐

css样式读取
在做页面改写时,发现外部引入的样式表中一部分的样式起作用,另一部分的样式没有用.无论怎么修改都没有用.最后搜索了下答案,发现是css样式文件与需引入的文件编码不一致.导致样式读取不到或者读取到一半.
php curl 发起get和post网络请求
curl介绍 curl是一个开源的网络链接库,支持http, https, ftp, gopher, telnet, dict, file, and ldap 协议.之前均益介绍了python版本的p ...
UIAutomation踩坑
最近有这样一个需要,在一个AppDomain中通过UIAutomation做一些操作,并在操作完成后卸载掉这个AppDomain.然而在卸载这个AppDomain时,总会出现System.Cannot ...
istio部署-istio prometheus
参考 fleeto/sleep fleeto/flaskapp 1. 使用 Prometheus 1.1 访问 Prometheus 1.1.1 端口转发 Prometheus 服务默认启用. # o ...
使用imread()函数读取图片的六种正确姿势
OpenCV实践之路——使用imread()函数读取图片的六种正确姿势 opencv里的argv[1]指向的文件在哪里测试 #include "opencv2/highgui/highgu ...
Linux下run文件的直接运行
比如realplay.run 安装方法如下 chmod +x realplay.run ./realplay.run 然后他就会执行安装了,在过程中可能会要求你输入yes或no 安装完后就可以用了 , ...
spring（三）：BeanDefiniton
题解【洛谷P1995】口袋的天空
题面题解从图中删边,直到图中只剩\(k\)条边,计算权值之和即可. 代码 #include <iostream> #include <cstdio> #include &l ...
Iris项目结构
nodejs后台运行的方法
nohup node ***.js & 这种方法可以,但存在你无法查询日志等问题在SSH里另一个有效的方法是screen命令. [转]http://www.9usb.net/201002/l ...

【CSS属性#1】

一、宽和高

二、字体属性

1. 文字字体 font-famlly

2. 字体大小 font-size

3. 字重(粗细) font-weight

4. 文本颜色 color

三、文字属性

1. 文字对齐 text-align

2. 文字装饰 text-decoration

3. 首行缩进 text-indent

四、背景

五、边框

六、圆形 border-radius

七、display 属性

【CSS属性#1】的更多相关文章

随机推荐

热门专题