CSS基础属性

最新推荐文章于 2024-08-29 14:32:34 发布

zhou_tao520

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量1.7k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/zhou_tao520/article/details/75093065

版权

CSS基础属性

字体相关属性

字体有以下相关属性：
font-size:字体大小
font-family:字体类型
font-style：字形（斜体等）
font-variant：字体变化（如大写）
font-weight：字体粗细

也可以简写为，但必须按以下顺序排序：
font-style font-variant font-weight font-size font-family
前面三个可缺省，使用默认值，foot-size和font-family必须指定值。

font: 60px 楷体;

文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰效果等。
color：设置文本的颜色。
text-decoration有以下属性：
none:默认值，没有装饰效果，
underline：加下划线，
overline：加上划线，
line-through：加删除线。
text-shadow：增加阴影，比如text-shadow：-5px -5px gray的含义是定义一个灰色的背景，其水平方向上左移5px，垂直方向上移5px。
direction有两个属性：ltr：自左至右；rtl自右至左。
text-align：文本对齐方式，有以下属性：
left:左对齐，
righe：右对齐，
center：居中对齐，
justify：两端对齐。
vertical——align：文本垂直对齐方式，有以下属性：
top：靠上对齐，
buttom：靠下对齐，
middle：垂直居中对齐，
text-indent：文本缩进。
letter-spacing：字符之间的间距。
word-spacing：字（单词）间距。
line-height:设置行高，实际上是调整行间距。

背景相关属性

body{
    background-color: #9f60f5;
    background-image: url("../img/1.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
}

background-color：背景色
background-image：设定背景图片，需要设置图片的url地址
background-repeat：图片的复制选项
（1）repeat：在水平和垂直两个方向上进行复制
（2）no-repeat：不复制
（3）repeat-x：在水平方向上复制
（4）repeat-y：在垂直方向上复制
background-position:背景的位置
也可以将这一组属性值封装到一个属性background中，表达更加简洁，书写顺序是：background-color background-image background-repeat background-position:

background: green url("../img/1.jpg") no-repeat right;

尺寸相关属性

div{
    width: 200px;
    height: 200px;
    background-color: rgba(155, 0, 245, 0.99);
}

height：高度，
width：宽度
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度

显示相关属性

隐藏元素的方法：
（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2）display：none，不仅隐藏内容，且不占位置

div{
    height: 300px;
    /*visibility: hidden;*/
    display: none;
}

而且display属性可以设置元素的显示模式，可以将块级元素和内联元素之间的转换

li{
    display: inline-block;
    width: 100px;
    background-color: rgba(0, 129, 245, 0.99);
}  
span{
    display: block;
}

inline：将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。
inline-block：将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置的大小
block：将内联元素以块级元素形式来显示，即display：block。

盒子模型

盒子模型有三个主要属性：
margin：外边距，与margin关联的有margin-top、margin-right、margin-bottom、margin-left
margin的使用方式
（1）margin：30px；表示上下左右外边距都为30px；
（2）margin-left：30px；单独设置上下左右外边距
（3）margin：10px、20px、30px、40px：分别设置上右下左四个边距为10px 20px 30px 40px
padding：内边距，与padding关联的有padding-top、padding-right、padding-bottom、padding-left
padding的使用方式和和margin类似
border：边框
border有两种写法：
（1）border: 1px dashed #ffa7ac;
（2）border-width：边框宽度
（3）border-style：边框线条类型
（4）border-color：边框的颜色
outline：边框的轮廓线，用法同border

定位

定位方式有：static、fixed、relative、absolute
static：静态定位（默认）
无定位，元素正常出现了流中，不受left、right、top、bottom影响

div{
    width: 200px;
    height: 200px;
    background-color: red;
    position: static;
}

fixed：固定定位

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: #dcb9ff;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: #ff5f74;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: #dcb9ff;
            position: fixed;
            left: 30px;
            top: 30px;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: #ff5f74;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

fix定位会将元素从流中“摘”出来单独进行定位，定位取决于left、top。
重新定位之后可能会出现重叠，通过z-index可以调整顺序，但是静态定位z-index无效
relative：相对定位

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: #dcb9ff;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: #ff5f74;
            position: relative;
            top: 20px;
            left: 30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: #6eff62;
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

相对定位是从原有位置进行位移，但并不影响后续位置。
absolute：绝对定位

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 200px;
            background-color: #dcb9ff;
        }
        #div2{
            width: 200px;
            height: 200px;
            background-color: #ff5f74;
            position: absolute;
            top: 20px;
            left: 30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: #6eff62;

        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>

    <div id="div3"></div>
</body>

绝对定位的元素将从流中被“摘”出来依靠left、top属性进行定位。
与fixed类似，但是参照物不同，fixe参照元素（html），absolute参照父容器

zhou_tao520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础属性

CSS基础属性字体相关属性字体有以下相关属性： font-size:字体大小 font-family:字体类型 font-style：字形（斜体等） font-variant：字体变化（如大写） font-weight：字体粗细也可以简写为，但必须按以下顺序排序： font-style font-variant font-weight font-size font-fa
复制链接

扫一扫