1、CSS基础

最新推荐文章于 2024-11-14 17:40:35 发布

一个有梦想的叫花子！

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量109

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/ccblogs/article/details/104601688

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

CSS基础

1. css样式表的三种使用方式
2. css选择器的种类
3. 常用布局样式属性
4. 常用文本的样式属性
5. 元素溢出
6. css显示特性
7. 盒子模型

1. css样式表的三种使用方式

行内式
内嵌式（内部样式）
外链式

2. css选择器的种类

标签选择器
类选择器
层级选择器（后代选择器）
id选择器
组选择器
伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=M, initial-scale=1.0">
    <title>Document</title>
    <!-- CSS样式 -->
    <style type="text/css">
        /* 标签选择器 */
        p {
            color: red;
        }
        /* 类选择器 */
        .blue {
            color: blue;
        }
        /* 层级选择器 */
        div h6 {
            background-color: yellow;
        }
        /* id选择器 */
        #h1L {
            color: yellowgreen;
        }
        /* 组选择器 */
        .blue,.h4L {
            height: 100px;
        }
        /* 伪类选择器 */
        .lClass:hover{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p>标签选择器</p>
        <h3 class="blue">类选择器、组选择器</h3>
        <h4 class="h4L">组选择器</h4>
    </div>
    <div>
        <h6>层级选择器</h6>
        <h1 id="h1L">id选择器</h1>
    </div>
    <div>
        <label class="lClass">伪类选择器</label>
    </div>
</body>
</html>

3. 常用布局样式属性

width：内容宽度
height：内容高度

background：设置背景色或者背景图片

background : gold;
background : url(*.*);

border：设置元素四周的边框
padding：设置元素包含的内容和边框之间的距离
margin：设置元素和外界的距离
float：设置浮动，浮动可以让元素排列在一行

4. 常用文本的样式属性

color：设置文字的颜色
font-size：设置文字的大小
font-family：设置文字的字体
font-weight：设置文字是否加粗
line-height：设置文字的行高，设置行高可以垂直方向居中
text-decoration：设置文字的下划线
text-align：设置文字水平对齐方式
text-indent：设置文字首行缩进

5. 元素溢出

当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。
1. overflow的设置项：
  1. visible：默认值，显示子标签溢出部分
  2. hidden：隐藏子标签溢出部分
  3. auto：如果子标签溢出，则可以滚动查看其余部分内容