css3基础回顾

最新推荐文章于 2024-10-04 20:18:28 发布

MIMO. mimo

最新推荐文章于 2024-10-04 20:18:28 发布

阅读量52

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/mimo_mimo/article/details/129010018

版权

本文介绍了CSS的三种样式应用形式：内联样式（行内样式）、内部样式和外部样式，并展示了它们在HTML中的使用方法。此外，还讨论了选择器的规则，包括全局选择器、元素选择器和类选择器，以及文本样式的设置，如字体、颜色、对齐和行高。文章还提到了font复合属性和实现内容居中的技巧。

摘要由CSDN通过智能技术生成

css快速复习

1.三种样式
css形式包括内联样式（行内样式），内部样式，外部样式

内联样式（行内样式），内部样式如下
内联样式写于标签下
内部样式写于头部标签的style标签下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css形式包括内联样式（行内样式），内部样式，外部样式 -->
    <style>
        h3{
            color:red;
            font-size: 30px;
        }
        p{
            color:blue;
            font-size: 40px;
        }
    </style>
</head>
<body>
    
    <p style="color:blueviolet;font-size:30px;">内联样式</p>
    <h3>head3内部样式在head -style中写</h3>
    <p>p</p>


</body>
</html>

外部样式需要写在新建的css文件中，在需要运用样式的html文件的头部用link标签引用
文件夹内容

<!-- home.html内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入public.css的外部样式 -->
    <link rel="stylesheet" href="./public.css">
</head>
<body>
    <p>首页</p>
    <a href="./product.html">产品</a>
</body>
</html>

<!-- product.html内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
</head>
<body>
    <p>产品</p>
</body>
</html>

p{
    color: red;
    font-size: 30px;
}

2.选择器
css语法规则包括选择器和一条或多条声明（样式）
1）全局选择器，一般用于默认样式的设置，优先级最低
*{
}
2）元素选择器
文档中与元素p，b，div，a等，所有被选择的标签都会被改变,描述共性
p{

}
3）类选择器，描述个性用.xx{}来描述，比较灵活

/* 类选择器 */
<p class="oneclass">首页</p>
.oneclass{
    color: blueviolet;
}

类选择器可以被不同的多个标签引用
在一个标签下需要用两个类选择器如下
空格隔开

   <p class="oneclass size">首页</p>

3.文字样式及文本样式
1.文本样式

.font{
    /* 字号 font-size*/
  
    /* 文字加粗 */
    font-weight:bold;
    /* 字体倾斜 italic倾斜*/
    font-style: italic;
    /* 字体 微软雅黑适合网页 如果电脑安装了微软雅黑显示微软雅黑，没安装微软雅黑显示黑体，没安装黑体，则显示一种任意的非衬线字体*/
    font-family: 微软雅黑,黑体,sans-serif;
}
.font2{
    /* font复合样式 style weight size family ,若要省略只能省略前俩个不能省略后两个*/
    font:italic 700 66px 宋体;
}

1 首行缩进
text-indent
2.文本对齐方式
text-align：center；
图片水平居中也是这个属性
3. 文本装饰可用于消除超链接下划线（none）
text-decoration: line-through;


/* 文本样式 */
.text{
    /* 首行缩进 */
    text-indent: 50px;
        /* 首行缩进两个字：网页默认字号16px */
        text-indent: 32px;
        /* 存在局限性，取em */
        text-indent: 2em;
    /* 文本水平对齐方式  left center right*/
    text-align: center;

    /* 文本装饰 可用于超链接下划线*/
    text-decoration: line-through;

}