css基础语法

css语法

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

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

如果要定义不止一个声明，则需要用分号将每个声明分开。

高级语法

1，选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

2，继承

body {

     font-family: Verdana, sans-serif;

     }

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则。

派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

ol li strong {

    font-style: italic;

    font-weight: normal;

        }

ol li {

    color: blue;

}

</style>

</head>

<body>

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>

<li>我是正常的字体。</li>

</ol>

</body>

</html>

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

#red {color:red;}

#green {color:green;}

<p id="red">这个段落是红色。</p>

<p id="green">这个段落是绿色。</p>

类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">

This heading will be center-aligned

</h1>

<p class="center">

This paragraph will also be center-aligned.

</p>

属性选择器

下面的例子为带有 title 属性的所有元素设置样式：

[title]

{

color:red;

}

属性和值选择器

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]

{

border:5px solid blue;

}

属性和多个值选择器

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

css创建

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>

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

</head>

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>

<style type="text/css">

  hr {color: sienna;}

  p {margin-left: 20px;}

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

</style>

</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {

  color: red;

  text-align: left;

  font-size: 8pt;

  }

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {

  text-align: right;

  font-size: 20pt;

  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red;

text-align: right;

font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

以下展示我利用选择器和一些简单的css样式知识制作的网页代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        ol li strong {

        font-style: italic;

        font-weight: normal;

                    }

        ol li   {

        color: coral;

        text-indent: 2em;

            }

        p{

            color: burlywood;

            font-size: 60px;

            padding:2px;

            text-indent: 2em;

        }

        body{background-image:url("02.jpg");

        background-repeat: repeat;

        background-size: 110%;}

        table{

            width: 70%;

        }

        caption,th{

            font-size: 30px;

            font-style: italic;

            color: lightcoral;

        }

</style>

</head>

<body>

<p><strong>既然要爬山，就一定要去看看最高处的风景是什么样子。</strong></p>

<ol>

<li><strong>你的选择是做或不做，但不做就永远不会有机会。</strong></li>

<li>你必须成功，因为你不能失败。</li>

</ol>

<table align="center">

    <caption>三月</caption>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

    <br>

<tr>

    <th>周日</th>

    <th>周一</th>

    <th>周二</th>

    <th>周三</th>

    <th>周四</th>

    <th>周五</th>

    <th>周六</th>

</tr>

<tr>

    <th>1</th>

    <th>2</th>

    <th>3</th>

    <th>4</th>

    <th>5</th>

    <th>6</th>

    <th>7</th>

</tr>

    <tr>

        <th>8</th>

        <th>9</th>

        <th>10</th>

        <th>11</th>

        <th>12</th>

        <th>13</th>

        <th>14</th>

    </tr>

    <tr>

        <th>15</th>

        <th>16</th>

        <th>17</th>

        <th>18</th>

        <th>19</th>

        <th>20</th>

        <th>21</th>

    </tr>

    <tr>

        <th>22</th>

        <th>23</th>

        <th>24</th>

        <th>25</th>

        <th>26</th>

        <th>27</th>

        <th>28</th>

    </tr>

    <tr>

        <th>29</th>

        <th>30</th>

        <th>31</th>

    </tr>

</table>

</body>

</html>

css 基础教程学习的更多相关文章

  1. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  2. .Net程序员之Python基础教程学习----列表和元组 [First Day]

    一. 通用序列操作: 其实对于列表,元组 都属于序列化数据,可以通过下表来访问的.下面就来看看序列的基本操作吧. 1.1 索引: 序列中的所有元素的下标是从0开始递增的. 如果索引的长度的是N,那么所 ...

  3. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  4. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  5. Python基础教程学习笔记：第一章 基础知识

    Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...

  6. SpringCloud基础教程学习记录

    这个学习记录是学习自翟永超前辈的SpringCloud的基础教程. 自己写这个教程的目的主要是在于,想要更凝练总结一些其中的一些实用点,顺便做个汇总,这样自己在复习查看的时候更加方便,也能顺着自己的思 ...

  7. jascript基础教程学习总结(2)

    摘自:javascript基础教程 用链接对用户进行重定向: js001.html 这个HTML页面基于链接对用户进行重定向 <!DOCTYPE html PUBLIC "-//W3C ...

  8. javascript基础教程学习总结(1)

    摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...

  9. jsp学习---css基础知识学习,float,position,padding,div,margin

    1.常用页面布局 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

随机推荐

  1. windows设置开机自启动的地方

    2013-03-24 11:06 (分类:网络安全) 精心总结,这些都是可以放小木马的好地方,留意了 1.最简单的 开始→程序→启动它的位置 C:\Documents and Settings\*** ...

  2. pyHamcrest

    概念 Hamcrest是用于编写匹配器对象的框架.他提供了一套匹配符Matcher,这些匹配符更接近自然语言,可读性高,更加灵活.Hamcrest还有很好的可扩展性,能够创建自定义的匹配器. 支持语言 ...

  3. dapi 基于Django的轻量级测试平台八 Docker部署

    QQ群: GitHub:https://github.com/yjlch1016/dapi 采用Docker+Supervisor+Nginx+uWSGI+Django 一.Dockerfile文件: ...

  4. 在centos7上安装hadoop

    1.使用hadoop是需要jdk环境的,因为hadoop里面有java程序,而运行java程序需要jdk. 2.从宿主机上传文件到虚拟机有很多方法,我选择的是在虚拟机安装lrzsz,安装lrzsz命令 ...

  5. Dijkstra算法2

    // 再来一手精髓的Dijkstra // 复杂度O( E*log(V) ) #include <cstdio> #include <iostream> #include &l ...

  6. C#实现把String字符串转化为SQL语句中的In后接的参数

    实现把String字符串转化为In后可用参数代码: public string StringToList(string aa) { string bb1 = "("; if (!s ...

  7. python简明教程

    Python简明教程 MachinePlay关注 0.7072018.09.26 01:49:43字数 2,805阅读 9,287 Python一小时快速入门 1.Python简介   pylogo. ...

  8. Charles老版本教程

    链接:http://pan.baidu.com/s/1c16PxEo  刮开有奖->密码:dbml 初级篇: 1.1设置代理 1.2参数设置+界面介绍 1.3屏蔽多余数据 1.4请求重发 1.5 ...

  9. windows系统中如何删除文件路径过长的文件

    Q:通常在使用npm安装包后,路径会变的非常的长,有时候无法手动删除文件: 这个时候可以选中文件点击>添加文件到压缩文件,在弹出出来的框中勾选 压缩后删除原文件,>最后删除压缩包

  10. postman设置变量

    参数化 变量引用格式:{{username}}   , 区别jmeter的  {username} 一.设置与引用环境变量 背景:在不同的环境下跑相同的测试,生产环境或测试环境 二.设置与引用全局变量 ...