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. [Java in NetBeans] Lesson 05. Method/function

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: Define a method:(motivation: write one time, but use it many times ...

  2. xml--myeclipse用快捷键注释xml语句

    7.5以上版本才可以ctrl+shift+/ 撤销注释:CTRL + SHIFT + \ 参考:https://blog.csdn.net/tengdazhang770960436/article/d ...

  3. UVA 11168 Airport(凸包)

    Airport [题目链接]Airport [题目类型]凸包 &题解: 蓝书274页,要想到解析几何来降低复杂度,还用到点到直线的距离公式,之后向想到预处理x,y坐标之和,就可以O(1)查到距 ...

  4. Hibernate.基础篇《二》. getOpenSession() 和 getCurrentSession() - 1

    Hibernate.基础篇<二>. getOpenSession() 和 getCurrentSession() - 1 说明: 在Hibernate应用中,Session接口的使用最为广 ...

  5. db2字符串相关函数的使用

    db2字符串相关函数的使用 from :internet    一.字符转换函数 1.ASCII() 返回字符表达式最左端字符的ASCII 码值.在ASCII()函数中,纯数字的字符串可不用‘’括起来 ...

  6. memory consistency

    目前的计算机系统中,都是shared memory结构,提供统一的控制接口给软件, shared memory结构中,为了memory correctness,可以将问题分为:memory consi ...

  7. [1]传奇3服务器源码分析一 LoginGate

    服务端下载地址: 点击这里 网上基本上都有分析该源码的分析详解,如:请点击该链接,但容易晕,而且也不全!所以才有了本文! 一.首先来看服务端的LoginGate源码 先来张图比较让人容易理解

  8. 《Semantic Sentence Matching with Densely-connected Recurrent and Co-attentive Information》DRCN 句子匹配

    模型结构 首先是模型图: 传统的注意力机制无法保存多层原始的特征,根据DenseNet的启发,作者将循环网络的隐层的输出与最后一层连接. 另外加入注意力机制,代替原来的卷积.由于最后的特征维度过大,加 ...

  9. Orangegreenworks封装rpgmakermv

    You’ll get a zip file with a folder called “lib” and a file called greenworks.js. Put both of them o ...

  10. golang linux安装

    go在linux下的安装: [root@localhost src]# wget https://storage.googleapis.com/golang/go1.8.1.linux-amd64.t ...