zoukankan html css js c++ java

【CSS属性#1】

一、宽和高

二、字体属性

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; ：隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

苦才是生活
累才是工作
变才是命运
忍才是历练
容才是智慧
静才是修养
舍才会得到
做才会拥有

查看全文

相关阅读:
Beta 冲刺（2/7）
福大软工 · 第十次作业
Beta 冲刺（1/7）
BETA 版冲刺前准备
福大软工 · 第十一次作业
Alpha 冲刺（9/10）
Alpha 冲刺（8/10）
Alpha 冲刺（7/10）
2017-2018-1 20155321 《信息安全系统设计基础》第十四周学习总结
2017-2018-1 20155321 《信息安全系统设计基础》实验五——实时系统

原文地址：https://www.cnblogs.com/zyk01/p/11375967.html