CSS样式详解-优快云博客

本文详细介绍了CSS样式中的字体、文本、背景、尺寸等属性的应用方法，包括如何设置字体、颜色、对齐方式、背景图片及重复方式等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性名：属性值
Background-color：red
P{
background-color：red
font-size：24px
}
2.1字体相关属性
font-family：字体名称
font-size：字体大小
font-style：字形（斜体等）
font-variaus：字体变化
font-variant:字体变化（如大写）
font-weight: 100;字体粗细
italic：斜体

<style type="text/css">
    p{
        font-family: 楷体;
        font-size: 36px;
        font-style: italic;
        font-variant: small-caps;
        font-weight: 100;
        font:60px 楷体;
    }
</style>

可以简写，书写循序
font-style： font-variant: font-weight: font-size： font-family：
前面三个不可去缺，使用默认值，font-size：和font-family：必须指定值。

p{
    font:60px 楷体;
}

2.2文本相关属性
主演包括颜色、对齐方式、修饰效果等。
color设置文本的颜色
text-decoration文本的修饰
none：默认值，没有修饰效果；
uaderline：加下划线；
overline：加上划线；
line-through：加删除线；
text-shadow：增加阴影。比如text-shadow: 5px 20px blue的含义是定义一个绿色的背景，其水平方向上左移5px，垂直向上上移10px。
Direction：文本的方向：{ltr：自左向右;rtl自右向左}

text-align：文本对其方式：
{left左对齐；
right右对齐；
center居中；
justify两端对齐；}

vertical-align:文本垂直对其方式：
{top：靠上对齐；
bottom：靠下对齐；
middle：垂直居中}
text-indent：文本缩进
letter-spacing：字符之间的间距
word-spacing：字（单词）间距
line-height：设置行高，实际上是调整行间距

2.3 背景相关属性

body{
    background-color: #3aff31;
    background-image: url("图片/gou.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
}

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

background: green url("../pic/js.jpg") no-repeat right top;

2.4尺寸相关的属性
height：高度
width宽度

  <style type="text/css">
        div{
            height: 200px;
            background-color: #ff586e;
        }
    </style>
</head>
<body>
<div></div>
</body>

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

2.5显示相关属性
隐藏元素的方法
（1）Visibility：hidden：仅仅隐藏内容，该元素所占位置依然存在；
（2）display：none：（显示为空）不仅隐藏内容，还隐藏元素所

div{
height: 300px;
display: none;
}

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

<style type="text/css">
    li{
        /*display: inline;*/
        display: inline-block;
        width: 200px;
        background-color: blueviolet;
    }
    span{
        display: block;
    }
</style>

也可以将内联元素以块级元素形式来显示，即display：block。

2.6 盒子模型
margin：外边距
margin-top、margin-right、margin-bottom、margin-left
使用方式
（1）margin:30px;表示上下左右外边距都未30px；
（2）margin-left：30px；单独设置上下左右外边距
（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px 30px 40px

padding:内边距
也有上下左右边距，和margin类似，不再赘述。

border:边框
border-width: 边框宽度;
border-style: 边框线条类型;
border-color: 边框的颜色;
word中设置边框的操作
也可以使用更优化的书写方式
border:10px dashed blue;

margin: 20px 40px 60px 80px;
 padding: 50px;
border: 5px solid blueviolet;
 outline: 5px dotted red;

CSS基础属性2