初识CSS

最新推荐文章于 2024-09-20 21:57:37 发布

一条有梦想的咸鱼啊丶

最新推荐文章于 2024-09-20 21:57:37 发布

阅读量92

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/li2406608527/article/details/108254050

版权

什么是CSS？

CSS casicading style sheet 层叠样式表/级联样式表，是用来表现我们html 文件的一种语言，如果把HTML标签当做是人的身体的话，那么CSS就是给人的身体添加各种各样的衣服的。

CSS的三种引入方式

<!--  1：行内样式   2 内部样式  3外部样式 -->

    <!-- 1：行内样式  -->
    <p style="color: blue;">我是段落标签</p>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 两种方法引入外部样式 -->
    <!-- 外部引入第一种 链接引入 -->

    <link rel="stylesheet" href="./css/css 3种引入方式.css">

    <!-- 第二种css引入方式 内部引入css  -->
    <style>
        /* 外部引入第二种 导入css */
        /* @import url(./css/css\ 3种引入方式.css); */
        p{
            /* em rem ... */
            /* 在网页中，我们常用的单位是px 为单位，1px相当于1像素 */
            /* font-size:可以改变字体的大小 ; */
            font-size: 40px;
        }
    </style>
</head>

常用的引入方式一般有两种，分别是内部样式<style></style>，和外部引入样式link，样式代码量较多的时候建议使用外部引入写法，方便编写和检查，行内样式一般在特定情况下才使用，正常情况下尽量不要使用大量的行内样式。

CSS样式的优先级遵循就近原则：行内样式>内部样式>外部样式

CSS选择器

<style>
        /* 直接用标签改变样式，这个标签就称作
        标签选择器 */
        p{
            color: blue;
        }

        h2{
            color: skyblue;
        }
        /* 类选择器 可以给多个标签设置一样的类名 */
        .c{
            font-size: 50px;
        }

        /* id选择器  一个id名只能对一个标签（唯一性）*/
        #d{
            font-size: 30px;
            color: green;
        }
    </style>

</head>
<body>
    <p class="c">我是P标签</p>
    <p>我是P标签</p>
    <h2 class="c">我是h2标签</h2>

    <h3 id="d">我是h3标签</h3>

</body>

如上代码块所示，分别有：标签选择器，类名选择器，id选择器，其中id选择器要特别注意一下，一个id名能只对一个标签使用，不可以出现多个相同的id名。

三种基本选择器的优先级：id 最大 --- class ---标签最小

子代选择器和后代选择器,子代写法：父元素>子元素{}，后代写法：祖先元素后代元素{}

       .outer>p{ 
            /* 子代选择器  父元素>子元素 */
             color: slateblue; 
        }
            
        .outer p{
            /* 后代选择器  祖先元素 后代元素{} */
            color: red;
        }

CSS基本语法

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
             color:red;
             /*字体默认颜色是黑色*/
         }
    </style>
</head>
<body>
    <!-- 
         选择器{          
             声明1；(声明里面包含了属性名和属性值)
             声明2；
         }


         h1{
             color:red;
         }
     -->
     <h1>我是h1标签</h1>
</body>

如上代码块所示，要对某个标签编写样式，首先要选择到这个标签，然后给声明，声明里面包含属性和属性值，例如：

h1{background-color: red;}，表示选择了h1标签，对h1进行了背景颜色的改变background-color（属性），使h1的背景颜色变成红色red（属性值）。

CSS文本样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{ 
            /* color:red; */
            /* color: #000; 黑色*/ 
            /* color: #fff; 白色 */
            /* color: #f00; 红色 */
            /* color: #0f0; 绿色 */
            /* color: #00f;蓝色 */
            /* color: rgb(255, 0, 0); */
            color: rgba(255, 0, 0, .9);
            /* rgba();设置透明色  透明度的0.9 可以写成 .9 */
            /* text-align: left; */
            /* 将文本排到左边  默认值就是左边 */
            /* text-align: right; */
            /* 将文本排到右边 */
            text-align: center;
            /* 将文本居中 */

            /* 设置文本首行缩进 */
            text-indent: 20px;

            width: 800px;
            height: 100px;
            /* 设置文本的行高 */
            line-height: 100px;
            /* 设置行高等于高度，并且再设置text-align:center 就可以让文本水平垂直居中 */
            
            /* 设置文本装饰 */
            /* text-decoration: none; */
            /* 默认值为none */

            /* 给文本添加下划线 */
            /* text-decoration: underline; */
            /* 给文本上方添加一条线 */
            /* text-decoration: overline; */
            /* 给文本加上一条线，穿过这个文本 */
            /* text-decoration: line-through; */
        }
        a{
            text-decoration: none;
            /* 可以去掉a标签默认的下划线 */
        }
    </style>
</head>
<body>
    <a href="#">我是a标签里面的文本</a>
    <p class="a">我是p标签</p>
</body>

如上代码块所示，color设置字体颜色，text-align设置文本排列方式，text-indent设置文本首行缩进，line-height设置文本行高，cursor改变鼠标悬浮样式，user-select：none；设置用户不能选择文本等等。

图片和文本的对齐方式

 img{
            /* vertical-align: middle;  中间*/
            /* vertical-align: bottom;  下方 默认值*/
            /* vertical-align: top; 上方*/
        }

a标签的伪类

<style>
        a:link{
            /* 未访问时候的样式 */
            color: springgreen;
        }
        a:visited{
            /* 访问过后的样式 */
            color: palegoldenrod;
        }
        a:hover{
            /* 鼠标悬浮上方的样式 */
            color: skyblue;
        }
        a:active{
            /* 鼠标点击未松开时候的样式 */
            color: slateblue;
        }
    </style>

当四种状态同时需要的时候，需要严格遵循以上顺序

比较特殊，只生效颜色