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. php curl POST multipart/form-data与application/x-www-form-urlencode的区别

    背景 CURL在 a.php 中以 POST方式向 b.php 提交数据,但b.php无法接收到数据,而 CURL 操作显示成功. 原来,"传递一个数组到CURLOPT_POSTFIELDS ...

  2. android SDK打包app

    SDK  软件开发工具包(Software Development Kit) JDK  开发工具包(Java Developer's Kit) 1.搜索java jdk 进入官网 http://www ...

  3. How to compile and install Snort from source code on Ubuntu

    http://www.tuicool.com/articles/v6j2Ab Snort is by far the most popular open-source network intrusio ...

  4. Amber中的一些option设置及名词

    详细请见AMBER官方文档第18章第6节(18.6) Amber16.pdf The settings can be summarized as follows: imin=1  Choose a m ...

  5. iOS UI基础-11.0 UINavigationController

    导航控制器 利用UINavigationController,可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是系统自带的“设置”应用 UINavigationController的使用 ...

  6. HTML+css+html5基础+css3须知

    1.定位四种 静态定位(static):文档流默认的定位方式:一般不用写.      如果没有指定元素的position属性值,元素也就是静态定位.static是position属性的默认值,它表示块 ...

  7. VC6.0 error LNK2001: unresolved external symbol __imp__ntohl@4

    --------------------Configuration: oxToint1 - Win32 Debug-------------------- Linking... main.obj : ...

  8. 获取Sqlserver上一句语句执行后受影响的行数@@rowCount

    from:http://blog.163.com/rihui_7/blog/static/212285143201381343240404/ 返回受上一语句影响的行数. ROWCOUNT_BIG.&q ...

  9. Unity shader学习之Alpha Blend

    通过 ShaderLab 的 AlphaBlend 能够实现真正的半透明效果. 使用 AlphaBlend 时,需要关闭深度写入 ZWrite Off,但得非常小心物体的渲染顺序, RenderQue ...

  10. C# WPF Halcon HDevEngine混合编程

    1. WPF+Halcon 引用halcondotnet.dll和hdevenginedotnet.dll XAML中导入命名空间xmlns:halcon=”clr-namespace:HalconD ...