投稿
  1. 首页
  2. html-js-css

web前端-前端三剑客之CSS（1）

焦炭价格走势 • 2022-6-10 • html-js-css • 阅读 19

web前端-前端三剑客之CSS（1）,第1张

🐚作者简介：苏凉（专注于网络爬虫，数据分析）
🐳博客主页：苏凉.py的博客
🌐系列专栏：web前端基础教程
👑名言警句：海阔凭鱼跃，天高任鸟飞。
📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
👉关注✨点赞👍收藏📂

文章目录 写在前面什么是csscss语法css选择器css-元素选择器css-id选择器(#)css-类选择器(.)css-通用选择器(*)css-分组选择器css-组合器选择器后代选择器（空格）子选择器（>）相邻兄弟选择器（+）通用兄弟选择器（~） css-伪类选择器css-伪元素选择器 如何添加css外部css内部css行内css 层叠顺序行内>外部行内>内部内部和外部内部在外部之前定义内部在外部之后定义 小结

写在前面

前面我们学习了HTML的一些使用，让文本，图像和超链接在网页中显示，而我们接下来就一起学习如何对网页中的内容进行美化，让其看起来更舒服，更简洁。

什么是css CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中 css语法

选择器指向您需要设置样式的 HTML 元素。每一条属性:值为一条声明。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。 css选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
css选择器的分类：

简单选择器
根据名称，id，类来选取元素组合器选择器
根据他们之间的特定关系来选取元素伪类选择器
根据特定状态选取元素伪元素选择器
选取元素的一部分并设置样式属性选择器
根据属性或属性值来选取元素 css-元素选择器

元素选择器根据元素名称来选择 HTML 元素。
实例：

DOCTYPE html>
<head>
    <title>Documenttitle>
    <style>
        p{
            font-size: large;
            color:red;
            text-align: center;
        }
    style>
    
head>
<body>
    <p>一起学习cssp>
body>
html>

效果：

css-id选择器(#)

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！要选择具有特定 id 的元素，写一个井号（＃），后跟该元素的 id。
实例：

DOCTYPE html>
<head>
    <title>Documenttitle>
    <style>
        p{
            font-size: large;
            color:red;
            text-align: center;
        }
        #p_name{
            text-align: center;
            color: blue;
        }
    style>
    
head>
<body>
    <p>一起学习cssp>
    <p id="p_name">id选择器p>
body>
html>

效果：

css-类选择器(.)

类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例：

DOCTYPE html>
<head>
    <title>Documenttitle>
    <style>
        p{
            font-size: large;
            color:red;
            text-align: center;
        }
        #p_name{
            text-align: center;
            color: blue;
        }
        .p_class{
            text-align: center;
            color: pink;
        }
    style>
    
head>
<body>
    <p>一起学习cssp>
    <p id="p_name">id选择器p>
    <p class="p_class">class选择器p>
body>
html>

效果：

一个HTML 元素也可以引用多个类。
例如：

<p class="p_class p_class1">class选择器p>

		.p_class{
            text-align: center;
        }
        .p_class1{
            color: burlywood;
        }

效果：

注：类名不能以数字开头！

css-通用选择器(*)

通用选择器（*）选择页面上的所有的 HTML 元素。
实例：

DOCTYPE html>
<head>
    <title>Documenttitle>
    <style>
        *{
            font-family: 'Times New Roman', Times, serif;
        }
        p{
            font-size: large;
            color:red;
            text-align: center;
        }
        #p_name{
            text-align: center;
            color: blue;
        }
        .p_class{
            text-align: center;
        }
        .p_class1{
            color: burlywood;
        }
    style>
    
head>
<body>
    <p>一起学习cssp>
    <p id="p_name">id选择器p>
    <p class="p_class p_class1">class选择器p>
body>
html>

效果：

css-分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。
实例：

<html>
<head>
    <title>csstitle>
    <style>
        h1,p{
            text-align: center;
            color: brown;
        }
    style>
head>
<body>
    <h1>css分组选择器h1>
    <p>第一个段落：p>
    
body>
html>

效果：

分组选择器可以大程度的缩减代码，不同选择器之间用逗号分隔。

css-组合器选择器

组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。CSS 中有四种不同的组合器：

后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)通用兄弟选择器 (~) 后代选择器（空格） 
<html>
<head>
    <title>组合器选择器title>
    <style>
        div p{
            color: blue;
            font-size: larger;
        }
    style>
head>
<body>
    <div>
        <p>这是div的子/后代p>
        <section><p>这是div的后代，并非子p>section>
        <p>这也是div的子/后代p>
    div>
    <p>这是div的兄弟，与div同级，并与div相邻p>
    <p>这也是div的兄弟，但不相邻p>
body>
html>

效果：

子选择器（>） 
	<style>
	   div>p{
	       color: blue;
	       font-size: larger;
	   	}
	style>

效果：

相邻兄弟选择器（+） 
    <style>
        div+p{
            color: blue;
            font-size: larger;
        }
    style>

效果：

通用兄弟选择器（~） 
    <style>
        div~p{
            color: blue;
            font-size: larger;
        }
    style>

效果：

css-伪类选择器 css-伪元素选择器

CSS伪类和伪元素是个很有意思的一个点，这将大概率提升你对前端的兴趣，因此我将在下一篇详细为大家讲解，敬请期待吧！！

如何添加css

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

有三种插入样式表（css）的方法：

外部 CSS内部 CSS行内 CSS 外部css

通过使用外部样式表，只需修改一个文件即可改变整个网站的外观！每张 HTML 页面必须在 head 部分的 < link > 元素内包含对外部样式表文件的引用。

实例：

html代码

<html>
<head>
    <title>外部样式title>
    <link rel="stylesheet" type="text/css" href="style_test.css">
head>
<body>
    <div>
        <p>这是个盒子p>
    div>
    <h1>外部cssh1>
    <p>这是一个段落p>
body>
html>

css代码

div{
    background-color: antiquewhite;
    margin: 450px,450px;
    text-align: center;
}
h1,div~p{
    text-align: center;
    color: blue;
}

效果：

内部css

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 < style > 元素中进行定义。

<html>
<head>
    <title>外部样式title>
    <style>
        div{
    background-color: antiquewhite;
    margin: 450px,450px;
    text-align: center;
        }   
        h1,div~p{
            text-align: center;
            color: blue;
        }
    style>
head>
<body>
    <div>
        <p>这是个盒子p>
    div>
    <h1>外部cssh1>
    <p>这是一个段落p>
body>
html>

效果和上述同。

行内css

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
实例：

<html>
<head>
    <title>外部样式title>
head>
<body>
    <div style="background-color:pink; text-align: center; width: 100px;">
        <p>这是个盒子p>
    div>
    <h1 style="color:blue;">外部cssh1>
    <p style="color:red; font-size: large;">这是一个段落p>
body>
html>

效果：

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）外部和内部样式表（在 head 部分）浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

行内>外部

实例：
css代码

div{
    background-color: antiquewhite;
    margin: 450px,450px;
    text-align: center;
}
h1,div~p{
    text-align: center;
    color: blue;
}

html代码

<html>
<head>
    <title>外部样式title>
    <link rel="stylesheet" type="text/css" href="style_test.css">
head>
<body>
    <div>
        <p>这是个盒子p>
    div>
    <h1>外部cssh1>
    <p style="color:red;">这是一个段落p>
body>
html>

效果：

说明：在外部css中设置p段落颜色为蓝色，在行内设置为红色，实际显示为红色，说明行内样式优先级>外部样式优先级。

行内>内部

实例：

<html>
<head>
    <title>外部样式title>
    <style>
        div{
    background-color: antiquewhite;
    margin: 450px,450px;
    text-align: center;
        }
        h1,div~p{
            text-align: center;
            color: blue;
        }
    style>
head>
<body>
    <div>
        <p>这是个盒子p>
    div>
    <h1>外部cssh1>
    <p style="color:red;">这是一个段落p>
body>
html>

效果：

说明：在内部css中设置p段落颜色为蓝色，在行内设置为红色，实际显示为红色，说明行内样式优先级>内部样式优先级。

内部和外部 内部在外部之前定义

如果在链接到外部样式表之前定义了内部样式，则显示外部定义的样式。
实例：
css样式

div{
    background-color: antiquewhite;
    margin: 450px,450px;
    text-align: center;
}
h1,div~p{
    text-align: center;
    color: blue;
}
.p_class{
    color: blueviolet;
}

html代码

<html>
<head>
    <title>外部样式title>
    <style>
        .p_class{
            color:red;
        }
     style>
    <link rel="stylesheet" type="text/css" href="style_test.css">

head>
<body>
    <div>
        <p>这是个盒子p>
    div>
    <h1>外部cssh1>
    <p class="p_class">这是一个段落p>
body>
html>

内部在外部之后定义

将上面的style元素和link元素互换位置

<head>
    <title>外部样式title>
    <link rel="stylesheet" type="text/css" href="style_test.css">
    <style>
        .p_class{
            color:red;
        }
     style>

head>

效果：

通过上述例子我们可以总结出当渲染元素的顺序为从上到下，行内优先级最高，其次是内部和外部样式，在前面定义的样式会被后面定义的样式所覆盖！！

小结

到这里我们对css就有了一定的了解，下期带大家一起探索css伪元素和伪类选择器的使用，下期再见！！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1294830.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
焦炭价格走势 焦炭价格走势 一级用户组
0 0
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表（0条）

保存