css属性

最新推荐文章于 2024-07-20 21:01:09 发布

小hi胖胖

最新推荐文章于 2024-07-20 21:01:09 发布

阅读量801

点赞数 21

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_67252311/article/details/140116316

版权

1.⽂本属性

1.1颜色属性

格式: color: 值 ;

取值 :

英⽂单词

⼀般情况下常⻅的颜⾊都有对应的英⽂单词 , 但是英⽂单词能够表达

的颜⾊是有限制的 , 也就是说不是所有的颜⾊都能够通过英⽂单词来表达

rgb

rgb 其实就是三原⾊ , 其中 r(red 红⾊ ) g(green 绿⾊ ) b(blue 蓝⾊ )

格式 : rgb(0,0,0)

那么这个格式中的

第⼀个数字就是⽤来设置三原⾊的光源元件红⾊显示的亮度

第⼆个数字就是⽤来设置三原⾊的光源元件绿⾊显示的亮度

第三个数字就是⽤来设置三原⾊的光源元件蓝⾊显示的亮度

这其中的每⼀个数字它的取值是 0-255 之间 , 0 代表不发光 , 255 代表发光, 值越⼤就越亮

rgba

rgba 中的 rgb 和前⾯讲解的⼀样 , 只不过多了⼀个 a

那么这个 a 呢代表透明度 , 取值是 0-1, 取值越⼩就越透明

例如 : color: rgba(255,0,0,0.2);

⼗六进制

在前端开发中通过⼗六进制来表示颜⾊ , 其实本质就是 RGB

⼗六进制中是通过每两位表示⼀个颜⾊

例如 : #FFEE00 FF 表示 R EE 表示 G 00 表示 B

推荐取色工具

1.2font-style ⽤于打开和关闭斜体⽂本

格式： font-style: italic;

取值：

normal ：正常的，默认就是正常的

italic : 倾斜的

1.3font-weight 为字体设置粗细程度

格式： font-weight: bold;

取值 :

bold 加粗

bolder ⽐加粗还要粗

lighter 细线，默认就是细线

数字取值：

100-900 之间整百的数字

400 等同于 normal 700 等同于 bold

1.4font-size 为⽂字指定⼤⼩

格式： font-size: 30px;

单位： px （像素 pixel ）

注意点：通过 font-size 设置⼤⼩⼀定要带单位，也就是⼀定要写 px

1.5font-family 为⽂字指定特殊的字体

浏览器只会使⽤浏览器可以访问到的字体

格式：font-family:"楷体" ;

如果取值是中⽂，需要⽤双引号或者单引号括起来，多个单词组合也要加

1.6缩写格式（不推荐）

如果想用的话把注意点都记住
1.在这种缩写格式中有的属性值可以省略sytle可以省略weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的size不能省略family不能省略
4.size和family的位置是不能随便乱放的size⼀定要写在family的前⾯, ⽽且size和family必须写在所有属性的最后

1.7文本样式

⽂本装饰的属性

格式 :text-decoration: underline;

取值 :

underline 下划线

line-through 删除线

overline 上划线

none 什么都没有 , 最常⻅的⽤途就是⽤于去掉超链接的下划线

⽂本⽔平对⻬的属性

格式 : text-align: right;

取值 :

left 左

right 右

center 中

⽂本缩进的属性

格式 : text-indent: 2em;

取值 :

2em, 其中是 em 单位 , ⼀个 em 代表缩进⼀个⽂字的宽度

设置或者取消字体改变

⽤于使⽂本显示为全⼤写或全⼩写

text-transform 允许字体改变，⽂本变形

none 防⽌任何改变

uppercase 将⽂本转换为⼤写

lowercase 将⽂本转换为⼩写 capitalize 将所有单词第⼀个字⺟转换为⼤写

full-width 转换为类似于⼀个等宽字体

字体阴影

格式 : text-shadow: h-shadow v-shadow blur color;

取值 :

none: 取消所有阴影

h-shadow : 必需。⽔平阴影的位置。允许负值。

v-shadow : 必需。垂直阴影的位置。允许负值。

blur: 可选。模糊的距离。

color: 可选。阴影的颜⾊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            /* 删除线 */
            text-decoration: line-through;
            /*div 上下0 左右自动居中 */
            margin: 0 auto;
            border: 1px solid green;
            /* 文字居中 */
            text-align: center;
            /* 只有一行文字可以使用linheight进行垂直居中 */
            line-height: 100px;
            /* 首行缩进2字符 */
            text-indent: 2em;
            /* 自动将字母转化大写 */
            text-transform: uppercase;
            /* 字体阴影 */
            text-shadow: 10px 10px 1px red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <a href="">百度一下</a>
</body>
</html>

2.列表样式

3.其他样式（重要的）

line-height

设置⽂本的⾏⾼取值为绝对单位或者相对单位

display

显示⽅式的切换

inline ⾏内显示，宽⾼⽆效

block 块级显示，宽⾼有效

inline-block 为了能够让元素既能够不独占⼀⾏ , ⼜可以设置宽度和⾼度, 那么就出现了⾏内块级元素，⾏内显示同时宽⾼有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1, .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 如何将两个div设置在同一行 */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

none 不显示，不占据屏幕空

flex 伸缩盒布局

visibility

显示与隐藏

hidden 隐藏，占据屏幕空间

visible 显示

隐藏元素的几种方式（面试题）

display：none;

visibility：hidden

她两的区别

none 不显示，不占据屏幕空j间，不会占用标准流空间

hidden 隐藏，占据屏幕空间，会占据标准留空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1, .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 如何将两个div设置在同一行 */
            /* display: inline-block; */}
       
        .div1{
            display: none;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1, .div2{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /* 如何将两个div设置在同一行 */
            /* display: inline-block; */}
       
        .div1{
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</body>
</html>

opacity

透明度， 0-1 之间的取值，取值为 0 的时候隐藏，占据屏幕空间

overflow溢出处理

超出父容器该如何办？下面三种方法

1.2.2.hidden 超出内容隐藏

2.auto 超出产⽣滚动条

没超出就不出现滚动屏，超出就自动出现滚动条

3.scroll 滚动条

cursor

指定光标的样式

小hi胖胖

关注

21
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
css属性

格式: color:值;取值⼀般情况下常⻅的颜⾊都有对应的英⽂单词但是英⽂单词能够表达的颜⾊是有限制的也就是说不是所有的颜⾊都能够通过英⽂单词来表达rgb其实就是三原⾊其中r(red红⾊) g(green绿⾊) b(blue蓝⾊格式那么这个格式中的第⼀个数字就是⽤来设置三原⾊的光源元件红⾊显示的亮度第⼆个数字就是⽤来设置三原⾊的光源元件绿⾊显示的亮度第三个数字就是⽤来设置三原⾊的光源元件蓝⾊显示的亮度这其中的每⼀个数字它的取值是0-255之间, 0。
复制链接

扫一扫