前端基础之CSS_1

最新推荐文章于 2021-04-18 21:11:47 发布

Python之眼

最新推荐文章于 2021-04-18 21:11:47 发布

阅读量2.6k

点赞数

分类专栏： Python_前端文章标签： python 程序员新手入门

本文链接：https://blog.csdn.net/weixin_42625143/article/details/97260319

版权

阅读目录

摘要

CSS（层叠样式表）的三种设置方法
基本选择器
组合选择器
属性选择器
分组与嵌套
伪类选择器
伪元素选择器
选择器的优先级
一些样式的设置（字体、文本、背景、边框）
display属性设置

01.CSS（层叠样式表）的三种设置方法

CSS又名层叠样式表，它的作用就是给HTML网页进一步装饰，前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构，后面学习的表form表单展现的形式是很low的，需要进一步对齐修饰设置，让它变得更高大上起来，这就离不开CSS的知识。
层叠样式表(英文全称：Cascading Style
Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
语法结构：选择器 {属性：属性值；属性：属性值}
注释形式：/这是注释内容/
/*多行注释内容1
多行注释内容2
*/
三种设置方法： head里面style中写css：
head里面link引入css文件：
在标签内直接指定style：
hello world!

我们在设置不同种类标签内容的样式的时候，需要知道我们修改的标签的位置，接下来看看如何精确定位设置样式的位置，才能设置其样式。

02.基本选择器

标签通常同的属性有：id和class类

标签选择器：根据标签种类来设置该类标签样式
id选择器：每个标签都可以设置一个id在唯一标识它，所以我们可以通过这个id来定位到该标签位置，从而进行修改样式操作，id前面注意要加上#
类选择器：在标签里面设置class=“c1”，c1是一个类的设置样式，在style里定义的时候前面需要加点（.c1
{color：red}）
通用选择器：类似这种* {color： blue}，*代表所有标签，意思就是所有都全部设置

--------------------------------------------------------------------
	注：如果你对python感兴趣，我这有个学习Python基地，里面有很多学习资料，感兴趣的+Q群：895817687
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习测试</title>
    <style>
        p {
   color: gold}
        .c1 {
   color: mediumturquoise}
        #p1 {color: blue}
        * {
   color: red}
    </style>
</head>
<body>
<p>我要记住你的样子</p>
<div>像鱼记住水的拥抱</div>
<span>像云在天空中停靠</span>
<h3 class="c1">夜晚的来到</h3>
<p id="p1">也不会忘了阳光的温暖</p>
</body>
（涉及查找优先级的问题，在后面会谈及。）

在这里插入图片描述
03.组合选择器（span套span，不符合html5规则）

后代选择器==>div span：div里面所有的span

<div>
    01我要忘了你的样子
    <br>
    <span>
        02像鱼忘了海的味道
        <br>
        <span>
            03放下所有梦和烦恼
        </span>
    </span>
</div>

在这里插入图片描述

儿子选择器==>div>span：div

最低0.47元/天解锁文章

Python之眼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之CSS_1

阅读目录摘要CSS（层叠样式表）的三种设置方法基本选择器组合选择器属性选择器分组与嵌套伪类选择器伪元素选择器选择器的优先级一些样式的设置（字体、文本、背景、边框）display属性设置01.CSS（层叠样式表）的三种设置方法CSS又名层叠样式表，它的作用就是给HTML网页进一步装饰，前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构，后面学习的表...
复制链接

扫一扫