CSS 是指层叠样式表 (Cascading Style Sheets)，基本语法规则如下

CSS 由两个主要的部分构成：选择器，以及一条或多条声明

声明以大括号{ }括起来，一个申明包括属性和值，属性与值通过冒号分隔；多个声明通过分号；分隔

CSS注释以 "/*" 开始, 以 "*/" 结束，即/*注释内容*/

在html中插入CSS样式表的方法有三种：

1.外部样式表(External style sheet)：即所有的样式单独写在一个.css文件中，在html文件的head部分通过link进行链接

<head>

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

</head>

其中href表示的是外部css文件的路径和名称

2.内部样式表(Internal style sheet)：即写在html文件内，同样在head部分，但是是通过<style>······</style>进行引入的

<head>

    <style>

        body {background-image:url("images/back40.gif");}

        hr {color:red;}

        p {margin-left:20px;}

    </style>

</head>

3.内联样式(Inline style)：即将css表现内容与html内容糅合在一起，需要在html标签内通过style=' '来引用

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

对于一个html文件，可以同时使用多种css样式，此时显示优先级为内联样式 > 内部样式 > 外部样式 > 浏览器默认样式

单个选择器类型

1.对所有元素生效 *{front-size=14px}

2.行选择器  p { text-align:center;}

3.id选择器，以id属性来设置id选择器，以 "#" 来定义id选择器样式

id 选择器为标有特定 id 的HTML元素指定特定的样式，id是唯一的，即在一个文件中不可能存在两个相同id的标签

<style>

    #para1

    { text-align:center; color:red; }

</style>

······

<p id="para1">Hello World!</p>

<p>这个段落不受该样式的影响。</p>

4.class选择器可以在多个元素中使用，以class属性来设置class选择器，以 "." 来定义class选择器样式

class属性值不唯一，即不同的标签可以使用相同的class值

<style>

    .center

    { text-align:center; }

</style>

······

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

id选择器和class选择器，属性都不要以数字开头

如果只使用内部样式表，各选择器的优先级为class选择器>id选择器>行选择器

组合选择器

1.选择器1,选择器2,选择器3···,选择器n：多元素选择器，以逗号隔开，对各个选择器均生效

.container,#center,h1,p{color:red}

2.选择器1 选择器2：后代元素选择器，以空格隔开，对选择器1的下属选择器2生效，如果选择器1的一级子元素下没有选择器2，则在二级元素下寻找，再在三级元素下寻找，一直找到最后一级元素

ul li a{text-decoratio;none}

3.选择器1>选择器2：子元素选择器，以>隔开，对选择器1的下属选择器2生效，选择器2只能是选择器1的一级子元素

4.选择器1+选择器2：毗邻选择器，对选择器1后面紧跟着的兄弟选择器2生效

5.选择器1~选择器2：对选择器1后面的兄弟选择器2生效，不要求紧挨

也可以指定特定的html元素使用id和class

<style

    p#para1

    {text-align:left;color:red; }

    p.center

    { text-align:center; color:green; }

</style>

······

<p id="para1">使用id选择器</p>

<p class="center">使用class选择器</p>

属性选择器，以下为常用的

······

[name]{color:red} <!--对有name属性的元素生效-->

p[name]{color:green} <!--对p标签中有name属性的元素生效-->

p[name='p2']{color:yellow} <!--对p标签中有name属性且值为yellow的元素生效-->

······

<p name='p1'>p1</p>   <!--绿色-->

<p name='p2'>p2</p>   <!--黄色-->

<div name='p3'>div</div>  <!--红色-->

嵌套选择器，例子如下，需好好理解

<style>

    p {color:blue;text-align:center;}

    .marked {background-color:red;}

    .marked p {color:white;}

    p.marked {text-decoration:underline;}

</style>

······

<body>

    <p>这个段落是蓝色文本，居中对齐。</p>

    <div class="marked">

        <p>这个段落不是蓝色文本。</p>

    </div>

    <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>

    <p class="marked">带下划线的 p 段落。</p>

</body>

······

显示效果如下

在上述例子中

p{ }: 为所有 p 元素指定一个样式。

.marked{ }: 为所有 class="marked" 的元素指定一个样式。

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。

p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

css基本知识、选择器的更多相关文章

  1. CSS基础知识——选择器

    选择器 元素选择器# 文档元素为最基本的选择器 例子:div{属性:值}; 选择器分组 例子:h2,p{属性:值}; 表示符合这两种规则的元素设置相同的属性值 通配选择器 表示所有元素 类选择器 应用 ...

  2. CSS基本知识和选择器

    一.CSS基本知识 内联式css样式,直接写在现有的HTML标签中 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red ...

  3. java基础57 css样式、选择器和css定位（网页知识）

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  4. HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  5. CSS基础知识：常见选择器示例

    CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现.CSS是1996年由W3C审核通过并且推荐使用的.CSS的引入,就是为了使HT ...

  6. css基本知识

    WANGJUN59451   css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...

  7. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  8. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  9. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  10. CSS入门知识汇总

    1.CSS认识 在谈论CSS的概念之前,我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准,以便通过不同浏览器或终端设备向最终用户展示信息内容.一个网页的呈现是由三部分组成 ...

随机推荐

  1. win10系统180天试用到期需要激活

    激活时激活不了,需要先修复下:4-Win10yjjh_XiTongZhiJia 链接: https://pan.baidu.com/s/1M_aNu2bqtEVn3l8FXsa91A 提取码: 784 ...

  2. centos 6.x下编译dpdk 16.7 心得

    之前对dpdk编译了解得较少,之前直接就把centos yum update了,造成测试经理部署的centos 6.5升级为6.9,造成dpdk编译出错. 先说说centos 6.9下编译的心得: 1 ...

  3. linux安装svn客户端rabbitvcs

    我们都知道,自从svn出道以来,很多人都预言,cvs将会被其取代.就如同他们预言maven要取代ant一样.可见,svn的流行.在Windows中,最常用到的开源免费的svn客户端就是Tortoise ...

  4. 第一次使用theos自己遇到的坑

    这里自己遇到的一些问题,总结一下: 第一个问题建立好theos工程后make出现 xcrun: error: SDK "iphoneos" cannot be located xc ...

  5. dotnet 命令

    以下用实例串起dotnet常用命令,带你玩转dotnet命令. 1．创建(dotnet new) 首先我们创建一个项目,这里我们创建控制台程序,命令如下图所示. dotnet new dotnet n ...

  6. 使用SQL语句如何实现条件判断

    客户需求是咨询如何用SQL结合decode函数实现条件判断,比如当某一列数值大于500,对应类型"大于500":当某一列数值小于500,对应类型"小于500". ...

  7. mysql的in和not in的用法（特别注意not in结果集中不能有null）

    1. not in的结果集中出现null则查询结果为null; 例如下面sql中,含有list中null值,无法正确查询结果: SELECT COUNT(name) FROM CVE WHERE na ...

  8. POJ 3461 Oulipo(模式串在主串中出现次数 可重叠)

    Oulipo [题目链接]Oulipo [题目类型]KMP &题意: 给你两个字符串p和s,求出p在s中出现的次数. &题解: kmpC函数就是解题的,其中也就j=nex[j]难理解一 ...

  9. js控制元素隐藏和显示

    原生: 方法一: document.getElementById("idname").style.visibility="hidden"; document.g ...

  10. [11]Windows内核情景分析---设备驱动

    设备驱动 设备栈:从上层到下层的顺序依次是:过滤设备.类设备.过滤设备.小端口设备[过.类.过滤.小端口] 驱动栈:因设备堆栈原因而建立起来的一种堆栈 老式驱动:指不提供AddDevice的驱动,又叫 ...