CSS前戏

主要用来调节html标签的各种样式

"""

思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签

标签的两大重要属性>>>:区分标签

	1.class属性

		分门别类 主要用于批量查找

	2.id属性

		精确查找 主要用于点对点

学习css的流程

	1.先学习如何查找标签

	2.再学习如何调整样式

	css注释语法

	/*注释内容*/

"""

1.css语法结构

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

选择器 {

    	样式名1:样式值1;

    	样式名2:样式值2

}

2.css注释语法

/*注释内容*/

3.引入css的多种方式

1.head内style标签内部编写(学习的时候使用)

<p style="color: red">Hello world.</p>

2.head内link标签引入(标准的方式)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

3.标签内部通过style属性直接编写(不推荐)

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            background-color: #2b99ff;

        }

    </style>

</head>

4.@import外部引入

CSS基本选择器

1.标签选择器

直接按照标签名查找标签

    	div {

                color: red;

            }

	<div>cloud</div>

2.类选择器

按照标签的class值查找标签

    	.c1 {

            color: green;

        }

	<p class="c1">cloud</p>

3.id选择器

根据标签的id之精准查找标签

    	#d1 {

            color: yellow;

        }

	<p id="c1">cloud</p>

4.通用选择器

直接选择页面所有的标签

    	* {

            color:blue;

        }

CSS组合选择器

使用各种连接符将基本CSS进行组合 就产生了CCS组合选择器

用家族关系来描述CSS嵌套层级

示例：

	<p>ppp</p>

        <p>ppp</p>

        <div>div

            <p>div p</p>

            <div>div div

                <p>div div p

                    <span>div div p span</span>

                </p>

            </div>

            <span>div span</span>

        </div>

        <p>ppp</p>

        <span>span span</span>

<!--

针对标签的上下层级以及嵌套有另外的说法

        父标签 后代标签 子标签 弟弟标签 哥哥标签 祖先标签

我们选定一个标签 那他同级上面的标签为哥标签，同级下面的标签为弟标签。

-->

1.后代选择器(空格)

查找div里的 所有后代span 也就是查找到最深的嵌套层级

    div span {

            color: red;

        }

2.儿子选择器 >

查找div里第一层级的span 区分好儿标签和孙标签！

    div>span {

            color: yellow;

        }

3.毗邻选择器 +

查找div下面紧挨着他的span 只找一个

查找不到就失效

    div+span {

            color: yellow;

        }

4.弟弟选择器 ~

查找div下面同级别所有span 可以找多个

    div~span {

            color: yellow;

        }

分组和嵌套

分组 div,p,span

多个选择器合并查找 彼此之间是独立的

是为了简化代码 而产生的写法

div,p,span {  # 多个选择器合并查找

        color: yellow;

    }

#d1,.c1,span {

        color: green;

    }

嵌套

满足多个条件的标签才能被查找到。注意和CSS组合选择器有所区分！！这中间是没有连接符的 ! !

注意不能这样：divp 要么这样div p 要么这样div .c1

div.c1 {  查找class含有c1的div

        color: red;

    }

div#d1 {  查找id是d1的div

        color: red;

    }

.c1 p.c2 {  查找含有c1样式值里面的含有c2样式值的p标签 组合 + 嵌套

       color: antiquewhite;

    }

属性选择器 [username]

[username] {	按照属性名查找

    color: red;

}

[username='jason'] {  按照属性名等于属性值

    color: yellow;

}

div[username='jason'] {

    color: darkcyan;

}

伪类选择器 a:link hover active visited input:focus

选择处于某种特殊状态的元素，根据状态选择标签

"""a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色

通过伪类选择器可以修改a标签各种不同状态下的颜色：

没点过link 悬停hover 点下去不松开active 已经访问过的标签visited """

举例1：当悬停在a标签上 a标签变成桔色：

 a:hover {

        color: orange;

    }

举例2：设定input获取焦点(被点击)之后采用的样式

input:focus {

  background-color: red;

}

伪元素选择器 :before

主要用于向指定的选择器添加指定的效果。

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。



			p:first-letter {

				font-size: 48px;

				color: red;

			}

			p:before {		css添加文本无法正常选中

				content: '嘿嘿嘿';

				color: blue;

			}

			p:after {		css添加文本无法正常选中

				content: '呵呵呵';

				color: red;

			}



来自菜鸟教程的总结：

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

选择器优先级

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式

1.选择器相同 导入方式不同

	就近原则

2.选择器不同 导入方式相同

	内联样式1000 > id选择器100> 类选择器10 > 标签选择器1 > 继承0



附一张经典图片：

CSS样式条件 常见属性

字体样式 font text

font-size:14px 24px 28px 36px  字体代码

font-weight: lighter;          字体粗细

text-align: center		文本居中

text-decoration: none;  主要用于a标签取消下划线

text-indent: 32px;		首行缩进

颜色 color

使用取色器工具可获得rgb颜色

color:三种模式

    color: red;

    color: #3d3d3d;

    color: rgb(186,11,98);

    color: rgba(186,11,98，0.5) 最后一个参数还可以控制透明度 0~1

背景属性 background

注意color是定义标签内容的颜色

background是定义标签下背景的颜色

div {

        width: 800px;  # 设置div块宽 px的意思是像素

        height: 800px;  # 设置div块高

        background-color: red;  # 背景颜色

        background-image: url("https://img2.baidu.com/it/u=167083063");  # 将图片作为背景

        background-image: url("666.png");  # 用本地的图片作为背景

        background-repeat: no-repeat;  # 背景图像不会重复

        background-repeat: repeat-x;  # 背景图像向水平方向重复

        background-repeat: repeat-y;  # 背景图像向垂直方向重复

        background-position: center center # 设置背景图像的起始位置;

        background: url("666.png") blue no-repeat center center;

	# 当多个属性名有相同的前缀 那么可以简写一次性完成

    }

CCS选择器 选择器优先级 选择器常见属性的更多相关文章

  1. css样式表和选择器的优先级以及position元素属性值的区别

    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

  4. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  5. CSS选择器以及优先级与匹配原理

    最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选 ...

  6. 详解CSS选择器、优先级与匹配原理

    原文链接:http://polaris1119.javaeye.com/blog/764428 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个 ...

  7. 转载：详解CSS选择器、优先级与匹配原

    转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和 ...

  8. CSS选择器、优先级和匹配原理

    作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通 ...

  9. CSS系列------选择器和选择器的优先级

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

随机推荐

  1. 使用FastDFS打造一款高可用的分布式文件系统

    FastDFS 介绍 参考: http://www.oschina.net/p/fastdfs FastDFS 是一个开源的分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文 ...

  2. iOS Social和Accounts简单使用

    ACAccountStore *account = [[ACAccountStore alloc] init]; ACAccountType *type = [account accountTypeW ...

  3. 关于csh-C-shell的记录

    csh,由柏克莱大学的 Bill Joy 设计的,语法有点类似C语言,所以才得名为 C shell ,简称为 csh Bill Joy 是一个风云人物,他创立了 BSD 操作系统,开发了 vi 编辑器 ...

  4. 洛谷P1638 逛画展 （尺取法）

    尺取法的经典题目: 博览馆正在展出由世上最佳的 mm 位画家所画的图画. 游客在购买门票时必须说明两个数字,aa 和 bb,代表他要看展览中的第 aa 幅至第 bb 幅画(包含 a,ba,b)之间的所 ...

  5. 洛谷P1908 逆序对 （树状数组+离散化）

    模板题,树状数组加上离散化求逆序对. 1 #include<bits/stdc++.h> 2 using namespace std; 3 typedef long long LL; 4 ...

  6. 2022-09-11-Typecho_RSS优化显示全文

    layout: post cid: 26 title: Typecho RSS优化显示全文 slug: 26 date: 2022/09/11 15:53:38 updated: 2022/09/11 ...

  7. Maven中POM文件总体配置说明

    POM文件总体配置说明 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...

  8. PHP redis有序集合实现分页

    <?php //连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); //设置 redis 字符 ...

  9. 手把手教你从安装CentOS7.4镜像开始，搭建IoT视频监控系统

    摘要:在CentOS7.4服务器版本的环境下安装nginx服务器.配置文件服务器.流媒体服务器. 本文分享自华为云社区<华为云ECS服务器安装CentOS7.4镜像,部署GINX服务器.搭建物联 ...

  10. 深度剖析Java的volatile实现原理，再也不怕面试官问了

    上篇文章我们讲了synchronized的用法和实现原理,我们总爱说synchronized是重量级锁,volatile是轻量级锁.为什么volatile是轻量级锁,体现在哪些方面?以及volatil ...