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. SQL Server之获取下周一的日期

    今天项目中需要得到下周一的日期,故想到了一种解决办法,用slq语句解决了.当然实现方法肯定不只有这一种. -(select DATEPART(weekday,getdate())) /*下周一差几天 ...

  2. 2017/6Summary

    字符串转换为JSON 1.var json = eval('(' + str + ')'); 2.var json = (new Function("return " + str) ...

  3. windows Server2012 IIS8.0配置安装完整教程

    IIS8.0是windows Server2012自带的服务器管理系统,和以往不同,IIS8.0安装和操作都比较简单,界面很简洁,安装也很迅速.今天我们重点完整的演示下Internet Informa ...

  4. jQuery-使用hover(fn,fn)函数监听mouseover和mouseout两个事件

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. java中的锁之AbstractQueuedSynchronizer源码分析（一）

    一.AbstractQueuedSynchronizer类介绍. 该抽象类有两个内部类,分别是静态不可继承的Node类和公有的ConditionObject类.AbstractQueuedSynchr ...

  6. spring boot 知识点

    spring boot 好处 1. 简化配置,spring boot 提供了默认配置 例如 日志 默认logback日志  info级别 2. 简化部署,内嵌容器,tomcat,jetty,直接部署j ...

  7. 08 集合[11,22,33,44,55,66,77,88,99]，将所有<66的值保存至字典的第一个key中，将所有>=66的值保存至字典的第二个key中。即：{'k1':<66的所有值，'k2':>=66的所有值}

    li = [11,22,33,44,55,66,77,88,99]dict = {'k1':[],'k2':[]}for i in li:    if i < 66:        dict[& ...

  8. 【Hbase学习之一】Hbase 简介

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 apache-hive-2.1.3 ...

  9. jack welch：“你们知道了，但是我们做到了”

    一.我们发现,只要我们敢于相信自己,敢于朝着那些看似不可能的目标不懈努力,最终会如愿以偿,个人的领袖形象也将因此而确立. 二.一个领导者必须要有魄力.对我来说,这就是一个人能否领导一项业务的分水岭. ...

  10. 转：专题三线程池中的I/O线程

    上一篇文章主要介绍了如何利用线程池中的工作者线程来实现多线程,使多个线程可以并发地工作,从而高效率地使用系统资源.在这篇文章中将介绍如何用线程池中的I/O线程来执行I/O操作,希望对大家有所帮助. 目 ...