初识CSS

最新推荐文章于 2023-02-27 09:26:54 发布

qq_2746843972

最新推荐文章于 2023-02-27 09:26:54 发布

阅读量80

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xupt_rl/article/details/93174909

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 什么是CSS

Cascading Style Sheet 层叠样式表表现HTML文件样式的语言：包括对字体、颜色、变距、高度、宽度、背景图片、网页定位等设定。

2. CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页定的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录等等
有效的传递页面信息
可以很好的突出页面的主题内容，使用户第一眼就可以看见页面主要内容

3. CSS的基础语法

	选择器{
	声明1；（属性：值）
	声明2；（属性：值）
	}
	CSS最后一条声明后的“;”可写可不写，但是基于W3C的标准建议写上

4.Style标签

Style 标签在 HTML文档中的位置，在和之间

<style>
        /*style中写CSS代码  */
        h1{
            color: rebeccapurple;
        }
        h2{
            font-size: 50px;
        }
</style>

5.引入CSS的方式

1.行内样式

使用Style属性引入CSS样式

2.内部样式

CSS代码写在在<head>和</head>之间的标签中

3.外部样式表

链接式
导入式

链接式与导入式的区别

<link/>标签属于HTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器式无效的

CSS样式优先级
行内样式 > 内部样式表 > 外部样式表

1.行内样式
使用Style属性引入CSS样式

<body>
<!--第一种行内样式
    行内样式style属性引入，行内样式如果要添加多个样式，
    中间使用分号隔开
-->
<h1 style="color: rebeccapurple;font-size: 50px";>Hello java</h1>
<p style="color: antiquewhite;font-size: 60px">Hello CSS</p>

2.内部样式
CSS代码写在在<head>和</head>之间的标签中

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式表，需要使用style标签
格式：
    选择器{
        属性：属性值
    }
-->
    <style>
        a{
            font-size: 50px;
            color: blue;
        }
    </style>
</head>
<body>
<a href="">byeGood</a>
</body>

3.外部样式表
链接的CSS

div{
    color: yellow;
    font-size: 50px;
}
span{
    color: palevioletred;
    font-size: 50px;
}

1.链接式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部导入方式,需要使用link标签 -->
    <link rel="stylesheet" href="../resource/Style.css">
</head>
<body>
<div>
    海滨之城厦门欢迎您
</div>
<span>
    美丽中国，大好山河
</span>

</body>

2.导入式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第三种导入方式：外部导入方式 -->
   
    <!--也可以使用import -->
    <style>
        @import url("../resource/Style.css");
    </style>
</head>
<body>
<div>
    海滨之城厦门欢迎您
</div>
<span>
    美丽中国，大好山河
</span>
</body>

5.CSS基础选择器

1.标签选择器

HTML标签作为标签选择器的名称
 <h1>…<h6>、<p>、<img/><h1>…<h6>、<p>、<img/>
 格式：
标签名{属性：属性值}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color:red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p>美丽厦门欢迎您</p>
</body>

2.类选择器

格式：
<标签名 class= "类名称">标签内容</标签名>
.类名称{属性：属性值}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    类选择器
    需要一类，类在标签中定义，使用class属性
     -->
    <style>
        .a{
            color: blueviolet;
            font-size: 50px;
        }
    </style>
</head>
<body>
<p class="a">一花一树一白鹭</p>
</body>

3.ID选择器

格式：
<标签名 id= "id名称">标签内容</标签名>
#id名称{属性：属性值}

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id属性全局唯一，不能同名*/
         #aaa{
             color:rebeccapurple;
             font-size: 50px;
         }
        #bbb{
            color: blueviolet;
            font-size: 100px;
        }
    </style>

</head>
<body>
<p class="b" id="bb">1</p>
<a href="" class="a" id="aaa">2</a>
<div class="a">3</div>
<span class="a" id="bbb">4</span>

</body>

4.基础选择器的优先级
ID选择器>类选择器>标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--基础选择器的优先级是 ID选择器>类选择器>标签选择器-->
    <!--类选择器是.  id选择器是#-->
    <style>
        .test1{
            color:blue;
            font-size: 50px;
        }
        #test2{
            color: blueviolet;
            font-size: 100px;
        }
        h1{
            color:red;
            font-size: 150px;
        }
    </style>

</head>
<body>
<h1 class="test1" id="test2">美丽厦门欢迎您</h1>
</body>

小结：

标签选择器直接应用于HTML标签
类选择器可以再页面中多次使用
ID选择器在同一个页面中只能使用一次
基本选择器不遵循“就近原则”

5.CSS高级选择器

1.层次选择器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p,ul{
            border: 1px solid blueviolet;
        }
        /*后代选择器：
        需求：获取body下面的所有p标签
        使用空格隔开
        */
         body p{

            background: purple;
        }

        /*子选择器：
        需求：只获得body下面的第一层元素
        */
         body>p{
            background: red ;
        }


       /*相邻兄弟选择器，向下...(所谓兄弟是相同的标签：不同的就不可以，另外他是个相邻兄弟添加某个东西)（不包含自己）
       前提：定位到一个元素 E
       需求：获得指定元素的相邻兄弟元素
       */
         #a+p{
            background: yellow ;
        }

        /*兄弟选择器
        前提：定位到一个元素
        需求：获取指定元素的所有兄弟（指定下面的所有兄弟）元素(不包含自己)
        格式 :

        E ~ F {
        }
         */
        .aaa~p{
            background: deeppink ;
        }

    </style>
</head>
<body>


<p class="aaa">1</p>
<p id="a">2</p>
<p >7</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
</body>

2.结构为类选择器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        结构伪类选择器：
        概念：伪元素和伪选择器，是CSS定义好的。
        格式：
        选择器：伪元素{

        }
         */
        p,li{
            border :1px solid blue;
        }
        ul li:first-child{/*父类的第一个元素,并判断是否是li标签*/
            background: yellow;
        }
        ul li:last-child{/*父类的最后一个元素,并判断是否是li标签*/
            background: purple;
        }
        /*需求：选择body下面的第二个元素
            E:nth-child(n) --> 需要找到E元素的父级元素 , 寻找父级元素的第n个子元素 ,
       判断他是不是E元素 , 如果不是,就不会被选择.
         */
        p:nth-child(2){
            background: blue;
        }
        /*请你选择body下面的第三个p元素
       E : nth-of-type(n)  --->找到E的父级元素 ,然后在他的父级元素中去找第n个E元素,例如第二个不是子元素，那么他会继续往下找，直到第二个p元素
       */
        p:nth-of-type(2){
            background: pink;
        }
        /*
         E : first-of-type(n)
        选择父类具有指定类型的第一个E元素，如果第一个是li标签，第二个是p标签，那么就是改的第二个，因为这个选择的是父类指定类型的第一个元素
         */
        p:first-of-type{
            background:yellow;
        }
        /*
        E : last-of-type(n)
       选择父类具有指定类型的最后一个E元素
        */
        p:last-of-type{
            background:yellow;
        }

    </style>

</head>
<body>

<p>1</p>

<p>2</p>
<p>3</p>
<p>4</p>
<li>8</li>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>

3.属性选择器

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
    /*
    给基础代码添加样式
     */
        .demo1 a{
            float: left;/*浮动*/
            display: block;
            height: 50px;/*添加高度*/
            width: 50px;/*添加间隔*/
            border-radius: 10px;
            background: pink;/*背景是粉色*/
            color: white;/*里面的字是白色*/
            text-align: center;/*里面的数字剧中*/
            line-height: 50px;
            text-decoration: none;/*去掉数字下面的下划线*/
            margin: 5px;
        }
        /*属性选择器*/
        a[id]{/*把有id的背景变为红色*/
            background: red;
        }
        a[id=name]{/*把id=name的背景变为红色*/
            background: purple;
        }
        a[href^="http"]{/*以http开头的*/
            background: brown;
        }
        a[href$="jpg"]{/*以jpg结尾的*/
            background: blue;
        }
    a[href*="g"]{/*只要有g就可以*/
        background: yellow;
    }
    </style>
</head>
<body>

<p class="demo1">
    <a href="http://www.baidu.com" class="links" id="name">1</a>
    <a href=""  class="links">2</a>
    <a href="/1.png">3</a>
    <a href="/1.jpg"  class="links">4</a>
    <a href="/1.png" id="apple">5</a>
    <a href="http://blog.kuangstudy.com"  class="links">6</a>
    <a href="aaa">7</a>
    <a href="abcg.doc"  class="links">8</a>
    <a href="abcd.doc" id="">9</a>

</p>

</body>

qq_2746843972

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识CSS

1. 什么是CSSCascading Style Sheet 层叠样式表表现HTML文件样式的语言：包括对字体、颜色、变距、高度、宽度、背景图片、网页定位等设定。2. CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页定的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录等等3. CSS的基础语法...
复制链接

扫一扫

专栏目录