一、宽和高

二、字体属性

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 ...

随机推荐

Tomcat解压版-环境配置
[问题]Tomcat解压版在本地后,双击双击startup.bat,闪退 [解决办法] 1.在已解压的tomcat的bin文件夹下找到startup.bat,右击->编辑.在文件头加入下面 ...
root xshell登陆Ubuntu
https://www.jianshu.com/p/c8ee39488d2a xshell测试非root用户,可以正常连接,但是root用户仍旧无法访问解决方法:修改 /etc/ssh/sshd_c ...
webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
vs2019 scanf 解决 C4996问题
1. 首先选择项目 2. 然后选择最下面那行的工程属性, 其后于此处 3. 添加上 :_CRT_SECURE_NO_WARNINGS 最后保存,使用 scanf 读取即无报错了
util之Map
1.定义 Map<String, Integer> map = new HashMap<String,Integer>(); 2.判断map中是否存在某个键的值: if(map ...
HTML的页面结构
HTML的页面结构以下为命名的规范: header:标题头部区域的内容(用于页面或页面中的一块区域) footer:标记脚步区域的内容(用于整个页面或页面的一块区域) nav:导航类复杂内容以上3 ...
L2-3 名人堂与代金券
题解这题的话,每一个人都要占一个排名,即使排名并列了. 对于最后一个排名来说,即使人数超过了指定的k,也要加入. 代码 #include <bits/stdc++.h> using na ...
12.动态内存和智能指针、直接管理内存、shared_ptr和new结合使用
12.动态内存和智能指针 1.智能指针分为两种shared_ptr和unique_ptr,后者独占所指向的对象.智能指针也是模板,使用时要用尖括号指明指向的类型.类似emplace成员,make_sh ...
Servlet文件上传下载
今天我们来学习Servlet文件上传下载 Servlet文件上传主要是使用了ServletInputStream读取流的方法,其读取方法与普通的文件流相同. 一.文件上传相关原理第一步,构建一个up ...
在同一个tomcat下部署多个springboot项目时，springboot项目无法正常启动的问题
这个问题是基于,不使用springboot内置的tomcat会产生(即使用自己的tomcat时). 今天在部署springboot项目的时候遇到了一个问题,怎么部署都访问不了,在网上查了很多原因,什么 ...

【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】的更多相关文章

随机推荐

热门专题