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. js, css混淆

    原理:调用yuicompressor-2.4.8.jar, 生成混淆后的文件,强大的它能处理css,js. 1,准备一个txt,列出所需要合并的js,如js.txt jquery-1.9.1.min. ...

  2. daofu

    快排排序算法 public class QuickSort { public static void Main(String[] args) { , , , , , , , }; quickSort( ...

  3. mac本的环境基本完成大部分了

    1.禅道的部署,技术上最难搞 session 目录存储目录不存在的处理 终端:open /et 前往——>前往文件夹——〉/资源库/WebServer/Documents/ 在tem目录下新建文 ...

  4. phpstudy的使用

    1.第一步是下载phpstudy,你可以百度去下载,也可以通过下面我分享的网盘下载 链接:https://pan.baidu.com/s/1E_CXIrKv1N-jrlA4KCovZA 密码:mkx9 ...

  5. Cf Round #403 B. The Meeting Place Cannot Be Changed(二分答案)

    The Meeting Place Cannot Be Changed 我发现我最近越来越zz了,md 连调程序都不会了,首先要有想法,之后输出如果和期望的不一样就从输入开始一步一步地调啊,tmd现在 ...

  6. CentOS下Docker安装

    CentOS下Docker安装 1.安装: #sudo yum install docker 2.启动并加入开机启动: A.#sudo systemctl start docker B.#sudo s ...

  7. C#7.0新特性(VS2017可用)

    分享一下其实2016年12月就已经公布了的C#7.0的新特性吧,虽然很早就出来了,但咱这IDE不支持啊.. 不过在昨天的VS2017中已经完美可以支持使用了. E文好的,移步官方介绍地址:https: ...

  8. Beta阶段冲刺2.0

    1. 提供当天站立式会议照片一张 2. 每个人的工作 (有work item 的ID) 成员 昨天已完成的工作 今天计划完成的工作 工作中遇到的困难 具体贡献 郑晓丽 "我的活动详情&quo ...

  9. form的action属性值对应servlet的web.xml的url-pattern

    <form action="abc">在web.xml里面<servlet><servlet-name>123</servlet-name ...

  10. 【转】robot framework + python实现http接口自动化测试框架

    前言 下周即将展开一个http接口测试的需求,刚刚完成的java类接口测试工作中,由于之前犯懒,没有提前搭建好自动化回归测试框架,以至于后期rd每修改一个bug,经常导致之前没有问题的case又产生了 ...