一、web标准

所谓的web标准就是用来衡量我们当前的网页书写是否规范的一系列要求，这个标准是由W3C组织制定，在web标准中具体的要求就是结构、样式、行为三者相分离

结构：通过HTML标签来搭建的网页“架子”

样式：指的就是用CSS语言来对具体的HTML结构进行类化修饰

行为：指的就是通过javascript(js)让用户与网页当中进行交互

二、CSS基本使用

1.定义：CSS 指层叠样式表 (Cascading Style Sheets)或称为级联样式表，他的作用是修饰当前网页中的HTML元素

2.基本使用步骤

a.CSS和HTML可以看成是相互独立的语言，此时如果想用CSS来操作HTML，那么就需要将两者建立关系

b.此时在HTML当中就准备了一个叫style的标签（它是一个双标签），在这个标签对之前就可以写我们的CSS代码

c.通过CSS的选择器找到我们想要操作的元素，然后给它设置样式（写在style标签对之间）

三、体验CSS

1.常见的CSS属性

width:定义元素宽度，单位是PX

height：定义元素高度，单位PX

background-color:设置背景颜色

2.CSS代码的固定书写语法

选择器{CSS代码}

3.建议：CSS代码样式分行写，且每行以分号结束

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>体验CSS</title>

        <style type="text/css">

            p {

                width:200px;

                height:200px;

                background-color: green;}

        </style>

    </head>

    <body>

        <p>从今天开始学习CSS，写一个段落，设置宽度200PX，高度200PX，背景颜色绿色</p>

    </body>

</html>

四、CSS选择器

1.定义：所谓的CSS选择器就是CSS当中已经定义好的用来选中某些元素的固定语法，他的作用就是选中我们想要设置样式的元素

2.CSS选择器的分类

在CSS中有多种选择器，认为的分为两大类：简单选择器和复合选择器

3.简单选择器

a.标签名选择器:通过具体的HTML标签名来选择元素（会将当前网页中所有叫这个名字的标签都选中）

b.类名选择器：通过标签类名来选择元素

1.为什么需要类名选择器？

一个完整的网页需要很多标签组合在一起进行编写实现，所以同名的一个标签就会出现很多次，此时要对这些同名的标签设置不同的样式，使用标签名选择器是没有办法实现的，这种情况下可以使用类名选择器

2.类名选择器的基本使用步骤

定义HTMIL的网页结构，然后再想选中的元素身上设置Class属性

将想要一起选中的元素身上设置相同的class属性值（类名）

此时我们只需要再style标签中接着固定的语法来调用我们的类名：    .点类名{  }

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>体验CSS</title>

        <style type="text/css">

            .aa{

                width:300px;

                height:200px;

                background-color: green;

                color: white;}

        </style>

    </head>

    <body>

        <p class="aa">从今天开始学习CSS</p>

        <h1 class="aa">设置p标签和h1标签的样式为：宽度300PX，高度200PX，背景颜色绿色，字体为白色</h1>

        <a href="#">百度一下，你就知道</a>

    </body>

</html>

c.id选择器：通过id名称选择元素

a.为什么选择id选择器

如果想在众多的元素当中选择一个元素，就可以使用id选择器

b.怎么使用id选择器

在我们想要选中的元素身上设置一个元素属性叫id

给这个id属性设置一个值，我们称之为id名

在style中通过固定的语法来进行调用：   #id名{  }

要求在同一个网页当中不能有相同的id值

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>id选择器</title>

        <style type="text/css">

            #one{color: white;

            background-color: black;

            width: 200px;

            height: 200px;}

        </style>

    </head>

    <body>

        <a href="#" class="aa">百度一下，你就知道</a>

        <br />

        <a href="#" class="aa">新浪新闻</a>

        <h4 class="aa">静夜思</h4>

        <p id="one">窗前明月光，</p>

        <p>疑是地上霜。</p>

        <p>举头望明月，</p>

        <p>低头思故乡。</p>

    </body>

</html>

五、简单选择器总结

1.标签名选择器和类名选择器  - 默认一次可以选择多个元素，id选择器-默认一次只能选择一个元素

2.一个标签的身上可以同时又类名和id名，并且它们的值可以相同

3.允许一个标签的身上同时设置多个类名，多个类名之间用空格隔开，格式为：class="aa ss bb"

4.关于id选择器，要求同一个页面当中相同的id名只能出现一次

六、id名与类名的命名规则

名称不可以是纯数字，也不能以数字开头

名称不能是中文，也不能包含中文

名称不能以特殊字符开头，也不能包含特殊字符，可以使用中划线和下划线

名称要做到见名知意

七、复合选择器

1.为什么需要复合选择器

在实际的网页制作过程中，往往会出现很多网页结构层层嵌套很深的现象，而这种结构规模又很多，使用的标签名又一样， 此时就可以使用复合选择器，讲这些简单地选择器进行组合，从而让我们选择元素变得简单

2.常见的复合选择器

后代选择器：这种选择器就是将某一个元素看成是起点，将它作为祖先，然后向下进行穿透查找，去选择他后面的后代元素

后台选择器当中的每个部分可以使用任意的简单选择器进行组合使用，中间用空格隔开，可以不停的向下进行查找

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>后代选择器</title>

        <style type="text/css">

            div p span{

                color:width;

                background-color:red;

            }

        </style>

    </head>

    <body>

        <div >

            <span>我叫span1,辈分是儿子</span>

            <p><span>我叫span2，辈分是孙子</span></p>

        </div>

    </body>

</html>

后代选择器的使用

并列选择器：就是将多个选择器用逗号进行连接，表示同时选中这些元素，然后设置相同的样式，其中每个部分的选择器可以由任意类型的选择器构成

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>并列选择器</title>

        <style type="text/css">

            span,p{

                color:width;

                background-color:red;

            }

        </style>

    </head>

    <body>

        <span>我叫span1,辈分是儿子</span>

        <p>我叫span2，辈分是孙子</p>

    </body>

</html>

并列选择器

练习题

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>练习</title>

        <style type="text/css">

            body{

                /*text-align只能设置文字在当前元素中水平的对齐方式，也可以设置行内元素和图片*/

                text-align: center;

            }

            .two{

                color: black;

            }

            .txt{

                width: 300px;

                height: 38px;

            }

            div{

                /*margin-top定义距离前一排元素的距离，margin-bottom定义距离后一派元素的距离*/

                margin-top: 20px;

                margin-bottom: 10px;

            }

        </style>

    </head>

    <body>

        <img src="bd_logo1.png" alt="">

        <br>

        <a href="#">新闻</a>

        <a href="#" class="two">网页</a> <!--在定义样式时一般不使用ID名，ID一般留给js或后台取数据使用 -->

        <a href="#">贴吧</a>

        <a href="#">知道</a>

        <a href="#">音乐</a>

        <a href="#">图片</a>

        <a href="#">视频</a>

        <a href="#">地图</a>

        <br>

        <p></p>

        <form action="#" method="post">

            <input type="text" class="txt"/>

            <input type="submit" value="百度一下"/ class="but">

        </form>

        <div >

            <a href="#">新闻</a>

            <a href="#" class="two">网页</a>

            <a href="#">贴吧</a>

            <a href="#">知道</a>

            <a href="#">音乐</a>

            <a href="#">图片</a>

            <a href="#">视频</a>

            <a href="#">地图</a>

        </div>

    </body>

</html>

CSS选择器基本介绍的更多相关文章

  1. 第十课：CSS选择器的介绍和区分

    IE7以及以下版本: getElementById是不区分表单元素ID与Name的,因此如果有一个表单元素只定义name,并与我们的目标元素ID同名,并且我们的目标元素在它的后面,那么就会选择到那个表 ...

  2. html之css选择器学习

    相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...

  3. CSS入门介绍（二）CSS选择器

    css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: ...

  4. XPath语法和CSS选择器介绍

    XPath语法 XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历.XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 ...

  5. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  6. 细说CSS选择器

    众所周知,CSS的一个核心特征就是能向文档中的一组元素类型应用某些规则.每个规则都有两个基本部分:选择器(selector)和声明块(declaration block).下图显示了规则的各个部分. ...

  7. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  8. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  9. HTML 学习笔记 CSS(选择器3)

    CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...

随机推荐

  1. MVC4 @helper辅助方法

    Razor提供了一种很方便的语法,可以将view页面中部分内容或部分代码抽取出来,变成一个独立的辅助方法.   eg1: @foreach(var item in Model){ <标签tr&g ...

  2. CMD运行指令

    CMD运行指令   开始→运行→CMD→键入以下命令即可:   gpedit.msc-----组策略 sndrec32-------录音机   Nslookup-------IP地址侦测器 explo ...

  3. 【问题总结】万万没想到，竟然栽在了List手里

    说明 昨天同事开发的时候遇到了一个奇怪的问题. 使用Guava做缓存,往里面存一个List,为了方便描述,称它为列表A,在另一个地方取出来,再跟列表B中的元素进行差集处理,简单来说,就像是下面这样: ...

  4. Java进程占用内存过高，排查解决方法

    最近收到邮件报警,说内存使作率达到84%.如下图: 解决方法: A:可能是代码原因导致的问题: 1.使用命令:top 查看当前进程的状态 2.从上图可以看到PID:916的java进程占用内存较大.定 ...

  5. mysql--浅谈子查询1

    这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql5.6 系统环境:win 子查询概念 子查询就是在原有的查询语句中嵌入新的查询 子查询分类 1.where型子查 ...

  6. 【T-BABY 夜谈大数据】基于内容的推荐算法

    这个系列主要也是自己最近在研究大数据方向,所以边研究.开发也边整理相关的资料.网上的资料经常是碎片式的,如果要完整的看完可能需要同时看好几篇文章,所以我希望有兴趣的人能够更轻松和快速地学习相关的知识. ...

  7. jquery jtemplates.js模板渲染引擎的详细用法第三篇

    jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...

  8. python所有的魔术方法

    据说,Python 的对象天生拥有一些神奇的方法,它们总被双下划线所包围,他们是面向对象的 Python 的一切. 他们是可以给你的类增加魔力的特殊方法,如果你的对象实现(重载)了这些方法中的某一个, ...

  9. Python随笔---return与print，全局变量与局部变量

    Return是指返回一个数值,一般在函数中应用较多 Print则是指把结果打印出来,显示在屏幕上 def sum(a,b): total=a+b print('函数内:',total) return ...

  10. System.Span, System.Memory，还有System.IO.Pipelines

    System.Span, System.Memory,还有System.IO.Pipelines 使用高性能Pipelines构建.NET通讯程序 .NET Standard支持一组新的API,Sys ...