什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离

2.网页的表现统一,容易修改

3.丰富的样式,使页面布局更加灵活

4.减少网页的代码量,增加网页浏览器速度,节省网络带宽

5.运用独立页面的css,有利于网页被搜索引擎收录

CSS语法

CSS基础语法

CSS语法可以分为两部分:

  1. 选择器
  2. 声明

声明由属性和值组成,多个声明之间用分号分隔。

CSS注释

注释是代码之母。

/*这是注释*/

网页中引用CSS样式

  • 内联样式
  • 行内样式表
  • 外部样式表

内嵌方式

style标签

<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>

  

行内样式

<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签!</p>
</body>
</html>

  

外联样式表-链接式

link标签

index.css

p {
color: green;
}

然后在HTML文件中通过link标签引入:

<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>

  

基础选择器

在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,

选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。

基础选择器包括:

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器

标签选择器

通过标签名来选择元素:

示例:

p {
color: red;
}

  

将所有的p标签设置字体颜色为红色。

ID选择器

通过元素的ID值选择元素:

示例:

#i1 {
color: red;
}

  

将id值为i1的元素字体颜色设置为红色。

类选择器

通过样式类选择元素:

示例:

.c1 {
color: red;
}

  

将所有样式类含.c1的元素设置字体颜色为红色。

通用选择器

使用*选择所有元素:

* {
color: black;
} 

组合选择器

后代选择器

因为HTML元素可以嵌套,所以我们可以从某个元素的后代查找特定元素,并设置样式:

div p {
color: red;
}

从div的所有后代中找p标签,设置字体颜色为红色。

儿子选择器

div>p {
color: red;
}

从div的直接子元素中找到p标签,设置字体颜色为红色。

毗邻选择器

div+p {
color: red;
}

找到所有紧挨在div后面的第一个p标签,设置字体颜色为红色。

兄弟选择器

div~p {
color: red;
}

找到所有div标签后面同级的p标签,设置字体颜色为红色。

并集选择器

div,p{

  color:red;

}

选择所有<div>元素和<p>元素标签,设置字体颜色为红色。

属性选择器

除了HTML元素的id属性和class属性外,还可以根据HTML元素的特定属性选择元素。

根据属性查找

[title] {
color: red;
}

根据属性和值查找

找到所有title属性等于hello的元素:

[title="hello"] {
color: red;
}

找到所有title属性以hello开头的元素:

[title^="hello"] {
color: red;
}

找到所有title属性以hello结尾的元素:

[title$="hello"] {
color: red;
}

找到所有title属性中包含(字符串包含)hello的元素:

[title*="hello"] {
color: red;
}

找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:

[title~="hello"] {
color: red;
}

表单常用

input[type="text"] {
backgroundcolor: red;
}

伪类选择器

a:link(没有接触过的链接),用于定义了链接的常规状态。

        a:hover(鼠标放在链接上的状态),用于产生视觉效果。

        a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

        a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。

        伪类选择器 : 伪类指的是标签的不同状态:

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

  

before after伪类

 :before    p:before       在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容

  

例子

<html>
<head> <meta charset="utf-8"> <title>PHP中文网</title> <style type="text/css"> /*没访问之前*/
a:link{
color: red;
}
/*鼠标放在链接上的状态*/
a:hover{
color: green;
}
/*访问过后*/
a:visited{
color:black;
}
/*鼠标点击的时候*/
a:active{
color: blue;
} /*在p标签属性为c2的后面加上内容*/
p.c2:after{
content: 'hello';
color: pink;
} /*在所有的p标签的前面加上内容*/
p:before{
content: '伪类';
color: green;
}
</style> </head> <body> <a href="#">css中文网</a>
<p>你hao</p>
<p class="c2">你好</p>
</body>
</html>

 

css优先级和继承

css的继承

继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。

例如一个BODY定义了的颜色值也会应用到段落的文本中。

body{color:red;}       <p>hello</p>

这段文字都继承了由body {color:red;}样式定义的颜色。

然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。

p{color:green}

 

css的优先级

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

1 内联样式表的权值最高               style=""------------1000;

2 统计选择符中的ID属性个数。       #id --------------100

3 统计选择符中的CLASS属性个数。 .class -------------10

4 统计选择符中的HTML标签名个数。 p ---------------1

按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

 
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。

2、有!important声明的规则高于一切。

3、如果!important声明冲突,则比较优先权。

4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。

5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
 

demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层叠性</title>
<style type="text/css">
/*1 0 0*/
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
</style>
</head>
<body> <!--
层叠性: 权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了
权重: 谁的权重大,浏览器就会显示谁的属性 谁的权重大? 非常简单 数数 id的数量 class的数量 标签的数量 -->
<p id="box" class="container">
猜猜我是什么颜色
</p>
</body>
</html>

  

CSS基础和选择器的更多相关文章

  1. HTML&CSS基础-属性选择器

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

  2. HTML&CSS基础-常用选择器

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

  3. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  4. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. CSS基础及选择器

    CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...

  6. Css基础-id选择器

    id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...

  7. CSS 基础 优先级 选择器 继承

    1.样式优先级 (内联样式)Inline style     >    (内部样式)Internal style sheet     >     (外部样式)External style ...

  8. CSS基础之选择器

    一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...

  9. CSS基础2——选择器

    前面说过样式规则.也知道了样式规则语法形式为:选择器+声明块 如:div{ color:black:padding:10px; }   div即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...

随机推荐

  1. MongoDB:索引操作

    首先插入十万个数据 ;i;i++){ var rand = parseInt(i*Math.random()); db.person_test.insert({"name":&qu ...

  2. python argparse(参数解析)模块学习(二)

    转载自:http://www.cnblogs.com/fireflow/p/4841389.html(我去..没转载功能,ctrl + c 和 ctrl + v 得来的,格式有点问题,可去原版看看) ...

  3. 测试Linux下tcp最大连接数限制

    现在做服务器开发不加上高并发根本没脸出门,所以为了以后吹水被别人怼“天天提高并发,你自己实现的最高并发是多少”的时候能义正言辞的怼回去,趁着元旦在家没事决定自己写个demo搞一搞. 这个测试主要是想搞 ...

  4. IBGP规划

    在IBGP邻居中,使用反射器减少IBGP邻居关系是一种最常用的网络结构,在上图中AS65001中有6台路由器,其中,R1和R2是一组反射器,配置如下: R1: ! interface Loopback ...

  5. c#: Label控件加入AutoHeight属性

    此功能在界面布局中颇为实用,录代码以记之: public class LabelEx : Label { private bool autoHeight = true; [DefaultValue(t ...

  6. 451. Sort Characters By Frequency将单词中的字母按照从高频到低频的顺序输出

    [抄题]: Given a string, sort it in decreasing order based on the frequency of characters. Example 1: I ...

  7. [leetcode]7. Reverse Integer反转整数

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  8. CSS实现左侧多级菜单栏

    首先看要实现的效果, 主要是关心技术实现, 所以没怎么美化 我也是初学html, 所以写的比较啰嗦 1. 使用列表将内容显示出来 <!DOCTYPE html><html>&l ...

  9. spring源码分析之初始化过程

    1.org.springframework.web.context.ContextLoaderListener 一个ServletContextListener,web容器启动监听器 1.1内有成员C ...

  10. python中None与0、Null、false区别

    None是Python中的一个关键字,None本身也是个一个数据类型,而这个数据类型就是None,它可0.空字符串以及false均不一样,这些都只是对象,而None也是一个类. 给个bool测试: v ...