CSS样式表基础-CSDN博客

本文链接：https://blog.csdn.net/java_996/article/details/121137554

css简介

HTML语言局限性：语言本身关注页面布局和结构，不关注样式，虽然可以设置简单样式，但是代码会很繁琐

css：层叠样式表

主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等）、图片外形（宽高，边框样式，边距等）及版面布局和外观样式显示。

部分构成：选择器一条或者多条声明。

例如：h1{color：red; font-size:25px}

一般，css写在head标签中，在head中写一个style标签，将css放在里面。结构的html则写在body标签中。

/* 选择器{样式} */

/* 给谁改样式 {改什么样式} */

/* 选择器即为html标签，color为属性，red为值，还是以键值对形式出现，每个键值对以分号结束，属性和值之间是以冒号连接*/

<!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>CSS</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式 {改什么样式} */
        /* 选择器即为html标签，color为属性，red为值，还是以键值对形式出现，每个键值对以分号结束，属性和值之间是以冒号连接*/

        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>这是一个段落,12像素的红色字体</p>


</body>
</html>

css代码书写习惯

1.展开书写

一个属性值为一行

2.小写

代码虽然大小写都可以运行，但是，一般都是小写

3.空格规范

选择器后面与大括号之间一个空格，属性的冒号后与值之间一个空格

4.分号结尾

css的引入方式：

1.内部样式表：将css写入到HTML内部，在head标签下的style标签内部，也叫嵌入式

可以控制当前整个页面的元素样式

代码结构清晰，但是没有实现结构样式分离

2.行内样式表：只给一个标签写样式或者给很少很简单的样式，控制当前标签

  <div style="color: red; font-size: 12px;">青春不常在</div>

3.外部样式表：开发中常见的，适用于样式比较多的情况，把样式单独写在css文件中，之后把css文件引入到 HTML

外部样式表的引用：

1.新建一个.css文件，将所有的样式放入其中，只有样式，没有标签

2.通过link标签在html文件中引用

<link rel="stylesheet" href="css文件路径">
<!--注意相对路径和绝对路径，这个标签一般写在head标签中-->

01_css简介

css简介

css：层叠样式表

css代码书写习惯

css的引入方式：