前端学习 DAY03

Nancy在努力

已于 2022-07-22 09:36:27 修改

阅读量75

点赞数

分类专栏：前端学习文章标签：前端 css css3

于 2022-07-21 11:39:20 首次发布

本文链接：https://blog.csdn.net/Nancyuojuiivk/article/details/125760153

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3的基本语法，包括选择器的使用如标签选择器、类选择器和ID选择器，以及样式优先级规则。同时，讲解了内联样式、内部样式和外部引用样式三种引入方式，并通过实例展示了文本样式、字体样式、渐变样式、列表样式、表格样式以及盒子模型的应用。此外，还探讨了伪类和伪元素的用法，如链接伪类和文本首字母、首行的伪元素。

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

CSS3

级联样式表
CSS基本语法

<style>
        body{
            color:aquamarine;
        }
    </style>

语法：选择器{
声明1；
声明2；
}
style标签
在html内部使用css样式用style标签
一般style标签放在head标签里

CSS引入方式

内部使用
1.内部样式表

<style>
        /*内部样式*/
        h1{
            color: aquamarine;
        }
    </style>

2.行内样式

 <h1 style="color: red;">Hello</h1>

行内样式直接使用标签的style属性设置内容，不推荐使用
行内样式优先级大于内部样式
两种方式都不推荐用
外部引用
1.链接式引用

  <title>外部引用</title>
    <!--链接式引用-->
    <link rel="stylesheet" href="01-CSS外部引用.css"type="text/css">
    <!--采取就近原则-->
    <style>
        h1{
            color:blue;
        }

2.导入式引用

<!--导入式引用-->
     <style>
         @import url("01-CSS外部引用.css");
     </style>

css样式优先级
行内样式 > 内部样式
就近原则越接近标签的样式优先级别越高

CSS基本选择器

标签选择器

    <style>
        h1{
            color: blue;
        }
        p{
            color: aquamarine;
            font-size:20px;
        }
    </style>

将html标签作为选择器
类选择器

/*类选择器*/
        .address{
            color:rgb(red, green, blue);
        }

.类名
需要为标签设置class属性，相同class名称都会被样式修改
常用于一组标签修改样式
id选择器

   /*Id选择器*/
        #number{
            color:brown;
        }

#id
id名称设定全局唯一需要为标签设定id属性
常用于为某一个标签设定独立样式时使用

优先级别
id选择器>类选择器>标签选择器
不遵循就近原则

CSS文本样式

<!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>文本样式</title>
    <style>
        h1{
          /*文本颜色 */
          color:rgb(86, 113, 104);  /*点击颜色有相对应的值，选择其中一个就会显示出来*/
        }
        /* p.date */
        .date{
            text-align: right;   /*设置成哪种对齐方式 自选*/
        }
        /*移除链接下划线*/
        a{
            text-decoration: none;  
        }
        .up{
            text-transform: uppercase;  /*转换成大写*/
        }
        .lower{
            text-transform: lowercase; /*转换成小写*/
        }
        .cap{
            text-transform: capitalize; 
        }
        /*文本缩进样式*/
        .indent{
            text-indent: 100px;
        }
      </style>
</head>
<body>
    <h1>改变字体颜色</h1>
     <p class="date">2022年7月6日</p>
     <a href="https://www.baidu.com">百度一下</a>   <!-- 默认有一个下划线-->
     <P class="up">i like css</P>
     <p class="lower">i like css</p>
     <p class="cap">i like css</p>
    
     <p class="indent">海贼王啊啊啊啊</p>
</body>
</html>

字体样式

<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>字体样式</title>
    <style>
        h1{
            font-family: "楷体";  /*字体*/
            font-size:50px;   /*字体大小*/
            font-style: italic; /*字体样式*/
            font-weight: bold; /*字体加粗*/
        }
    </style>
</head>

渐变样式

<head>
    <title>渐变样式</title>
    <style>
        body{
            background-image: linear-gradient(120deg,#a6c0fe 0%,#f68084 100%);
        }    /*不需要添加兼容的  渐变样式可自行下载*/  
    </style>
</head>

可在这里查找渐变样式:http://color.oulu.me/

列表样式

<head>
    <title>列表样式t</title>
    <style>
        .none{
            list-style-type: none; /*大写英文字母*/
            list-style-type: upper-alpha;  /*前面是a b c这样的序号*/
            list-style-image: url(./24110307_8.jpg); /*前面用图片这样的样式*/
        }
    </style>
</head>

表格样式

   <title>表格样式</title>
    <style>
        table,tr,td{
            border: 1px solid red;
        }
        table{
            width: 100%;
        }
        .td1{
            height: 50px;
            /*内容水平对齐*/
            text-align: center;
            /*内容垂直对齐*/
            vertical-align: middle;
            background-color: blue;
            color: azure;
        }
        .td2{
            height: 50px;
            /*内容水平对齐*/
            text-align: center;
            /*内容垂直对齐*/
            vertical-align: middle;
            background-color: rgb(255, 0, 13);
            color: rgb(159, 196, 196);
        }
    </style>
</head>
<body>
    <table >
        <tr>
            <td class="td1">姓名</td>
            <td class="td2">性别</td>
        </tr>

        <tr>
            <td>张三</td>
            <td>男</td>
        </tr>
    </table>
</body>

盒子模型

  <style>
        .d{
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 10px;
            border: 5px solid blue;
        }
    </style>

伪类和伪元素

   <title>伪类</title>
    <style>
        a:link{color: red;} /*链接没有点击的时候的颜色*/
        a:visited{color: aqua;} /*访问某链接之后的状态*/
        a:hover{color: aquamarine;} /*鼠标悬停状态*/
        a:active{color: blueviolet;} /*鼠标按下的状态*/
        input:focus{color: blue;}   /*选择元素输入后具有焦点*/
        /*匹配第一个元素*/
        p:first-child{
            color: red; 
        }
       /*匹配所有p元素的第一个元素*/
        p > b:first-child{
            color:blue;
        }
        /*匹配第一个p元素里面所有的b元素*/
        p:first-child b{
            color: aqua;
        }

        q:lang(n0){
            quotes: '\00AB' '\00BB' '\201E' '\201C';
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank"> 百度一下</a>
     <br>

     姓名:<input type="text">
     <p>啊啊啊<b>啊啊</b>啊啊CSS</p>
     <p>啊啊啊<b>啊啊啊</b>啊啊HTML</p>
     <p>啊啊啊<b>啊啊</b>啊啊啊java</p> 

     <p>完成<q lang="no">段落的引用</q></p>
</body>

    <title>伪元素</title>

    <style>
        /*对于第一行改变颜色 用于文本首行设置特殊样式*/
        /*first-line伪元素只作用于块级元素*/
       /* p::first-line{
            color: aqua;
        }*/

        /*first-letter 伪元素用于向文本的首字母设置特殊样式*/
        p::first-letter{
            color:aqua;
        }

        .p1::first-letter{
            color: aquamarine;
        }

        /*可以在元素前面插入新的内容*/
        h1:before{
        content: url(./24110307_8.jpg);
        }
        h1:after{
           content: url(./24110307_8.jpg);
        }
    </style>
</head>
<body>
    <h1>1111</h1>
    <p>aaaaaaaaaa
       cccccccccccccaaaaaaaaaaaaaa
    </p>
</body>