CSS属性#1

其他 2018-09-24 05:07:00 阅读次数: 0
版权声明：竹永康 https://blog.csdn.net/qq_41964425/article/details/82292353

目录

一、宽和高

二、字体属性

1. 文字字体 font-famlly

2. 字体大小 font-size

3. 字重(粗细) font-weight

4. 文本颜色 color

三、字符属性

1. 文字对齐 text-align

2. 文字装饰 text-decoration

3. 首行缩进 text-indent

四、背景

五、边框

六、圆形 border-radius

七、display 属性

 

一、宽和高

  • 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：水平方向平铺

repeat-y：垂直方向平铺
no-repeat：背景图片不平铺

简写：background: green url("test.jpg") no-repeat center center;

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

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

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

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

猜你喜欢

转载自blog.csdn.net/qq_41964425/article/details/82292353
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022