一、初始CSS

1.1、介绍CSS

1、CSS定义如何显示HTML元素。

2、当浏览器读到一个样式表，他就会按照这个样式表来对文档进行格式化（渲染）。

1.2、CSS语法

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

1.3、CSS注释

        /*#p1 {color: green;}*/

        /*注释*/

        /*注释是代码之母*/

二、CSS的几种引入方式

2.1、行内样式

　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。　

<p style="color: red;">我是一个p标签！</p>

2.2、内部样式

　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p {color: aqua}

    </style>

</head>

2.3、外部样式

　　外部样式就是将CSS写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

/*第一步：创建CSS文件*/

/*第二部：在<head></head>中写入*/

    <link rel="stylesheet" href="基本的样式.css">  /*文件名*/

三、CSS选择器

3.1、基本选择器

　　1、元素选择器

p {color: aqua}

　　2、ID选择器

        #p1 {

            color: green;

        }

/*id='p1'，#表示ID*/

　　3、类选择器

.c1 {color: yellow}   /*在style中写入*/

/*首先要写入相同属性*/

<span class="c1">我是span标签</span>

<p class="c1">我是p标签</p>

<i class="c1">我是i标签</i>

/*有c1这个class的p标签*/
p.c1 {color: antiquewhite}

　　4、通用选择器

* {color: aquamarine}

3.2、组合选择器

　　1、儿子选择器

        /*找儿子标签：找li的儿子a的标签*/

        li>a {color: green}

<ul>

    <li><a href="">手机</a></li>

    <li><a href="">电脑</a></li>

    <li><a href="">爆米花</a></li>

</ul>

　　2、后代选择器

        /*子子孙孙中找标签*/

        #p1 p {color: blue}

<div id="p1">

    <div>

        <div>

            <p>我是一个p标签</p>

        </div>

    </div><p>我是一个p标签</p>

</div>

　　3、毗邻选择器

       /*毗邻选择器：找下面紧挨着的*/

        div+p {color: yellow}

<p>div上面的p</p>

<div>div</div>

<p>div下面的p</p>

　　4、弟弟选择器

        /*弟弟选择器：同级往下面找*/

        #d2~* {color: pink}

<div id="d2">d2</div>

<p>d2下面的p</p>

<a href="">哈哈</a>

<p>p标签</p>

3.3、属性选择器

    <style>

        /*找到所有有qs这个属性的标签*/

        div[qs] {color: green}

        /*找到所有有qs属性值是nb2的标签*/

        div[qs='nb2'] {color: yellow}

    </style>

<div id="d1" class="c1" qs="nb">骑士计划！</div>

<div  qs="nb2">骑士计划！</div>

<div>只要python学得好，媳妇年年在高考</div>

3.4、分组和嵌套

　　1、分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择期之间使用，用逗号分隔的分组选择器来统一设置元素样式。

    <style>

        div,

        p {color: blueviolet}

    </style>

<div>我是div标签！</div>

<p>我是p标签！</p>

　　2、嵌套

多个选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

    <style>

        .c1 p {color: blue}

    </style>

<div class="c1">

    <div>

        <i>我是i标签</i>

        <p>

            我是p1标签

        </p>

    </div>

    <p>我是p标签！</p>

</div>

3.5、伪类选择器　

    <style>

        /*未访问过的链接，设置为：粉红色*/

        a:link {

            color: pink;

        }

        /*访问过的链接，设置为：蓝色*/

        a:visited {

            color: blue;

        }

        /*鼠标指向瞬间，链接变成紫色*/

        a:hover {

            color: blueviolet;

        }

        /*鼠标选定链接瞬间，链接变成黄色*/

        a:active{

            color: yellow;

        }

        /*input输入框获取焦点时样式*/

        input:focus {

            outline: none;

            background-color: aqua;

        }

    </style>

<a href="https://www.luffycity.com">路飞学城</a>

<a href="http://www.4399.com">4399</a>

<a href="https://www.baidu.com">百度</a>

<a href="https://www.flnet.com/">富连网</a>

<a href="http://www.qq.com">QQ</a>

<input type="text">

3.6、伪元素选择器

    <style>

        /*首字母设置*/

        p:first-letter {

            font-size: 48px;

            color: aqua;

        }

        /*在每个p元素之前插入内容*/

        p:before {

            content:"#";

            color: red;

        }

        /*在每个<p>元素之后插入内容*/

        p:after {

            content: '[/]';

            color: red;

        }

    </style>

<p>我是p标签</p>

<div>我是div标签</div>

<i>我是i标签</i>

3.7、选择器的优先级

　　1、继承是CSS的一个主要特征。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {

  color: red;

}

　　可以通过对应的标签设置字体颜色就可以覆盖掉它继承的样式。

p {

  color: green;

}

　　2、选择器的优先级

按照不同选择器的权重来决定的，具体的选择如下：

除此之外还可以通过添加 !important 方式来强制让样式生效，但并不推荐使用。因为如果过多使用会导致样式混乱，不易维护。

　　2.2不讲道理的 !important

        p {color: red !important}

<p style="color: aqua">我是p标签</p>

<div>我是div标签</div>

<i>我是i标签</i>

HTML的基础样式之CSS的更多相关文章

  1. 适用于所有页面的基础样式base.css

    @charset "UTF-8"; /*css 初始化 */ html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, ...

  2. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 一、CSS的基础样式

    CSS的基础样式 border 边框 复合写法 border:border-width  border-style border-color: border-width:边框宽度 top right ...

  5. HTML&CSS基础-样式的继承

    HTML&CSS基础-样式的继承 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> & ...

  6. Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

    1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...

  7. 原创：新手布局福音！微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  8. 基础DOM和CSS操作(二)

    元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...

  9. 任务五：零基础HTML及CSS编码练习加强版

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

随机推荐

  1. linux与C内存管理机制

    转自知乎专栏:https://zhuanlan.zhihu.com/p/51855842?utm_source=wechat_session&utm_medium=social&utm ...

  2. python基础知识10---算法

    一.递归 程序本身自己调用自己称之为递归,类似于俄罗斯套娃,体现在代码中:用户执行最外(N)层函数,最外侧调用N-1层函数,N-1层函数调用N-2层函数... 利用函数编写如下数列: 斐波那契数列指的 ...

  3. Oracle 外键级联更新

    Oracle数据库中,外键约束只允许级联删除,不允许级联更新,因此,如果想要实现主表数据更新后,子表外键自动更新,只能取消外键关系,通过前端程序来维护实现完整引用,一个代替的解决方案是使用延迟约束和触 ...

  4. microsoft.jet.oledb.4.0 未注册

    64位系统已经不支持4.0 解决办法 1.下载 ACE2010的驱动,64位的. http://www.microsoft.com/downloads/zh-cn/details.aspx?famil ...

  5. HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.m ...

  6. C++ 64位操作系统调用 RegOpenKey() 读取注册表，返回 2， ERROR_FILE_NOT_FOUND

    环境:64位操作系统, VS2017 首先在命令行执行 REG ADD HKLM\Software\seastarsun /v serial /t REG_SZ /d 58ae4cb077a4e1 在 ...

  7. C#后台接java接口传输字节数组（byte[]）

    事情是这样的C#t代码之前接的WCF接口,后来那边统一改为java的接口,我是用的HttpClient从后台发请求调用的java接口,其他接口都很顺利,是的....知道遇到一个需要传byte[]类型数 ...

  8. JSON 序列化与反序列化, 与XML相互转换.

    方式一: 使用于 JavaScriptSerializer类 适用于普通场景, Excel导入导出, 前台传输查询参数直接处理等. JavaScriptSerializer serializer = ...

  9. airflow整体架构

    run命令运行过程 读取dag文件生成task依赖关系,然后生成封装airflow run的command命令,通过celery发送到executor端,重新执行该airflow run命令. sch ...

  10. Redis深入学习笔记（四）主从数据复制流程

    主从节点的数据复制是Redis高可用和高负载的重要基础,本篇介绍数据的主从复制流程. 数据复制策略: 全量复制:一般用于初次复制场景,Redis早期支持的复制功能只有全量复制,它会把主节点全部数据一次 ...