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. springboot 基于Tomcate的自启动流程

    Springboot 内置了Tomcat的容器,我们今天来说一下Springboot的自启动流程. 一.Spring通过注解导入Bean大体可分为四种方式,我们主要来说以下Import的两种实现方法: ...

  2. win7下彻底卸载和重装mysql

    1 .目的:第一次安装完mysql后忘记了临时密码,通过各种途径都无法更改密码,因此不得不把mysql卸载了. 2 .建议:第一次安装mysql时会分配一个临时密码,如最后一行的se_:j<tq ...

  3. MySQL常用语法总结

    一,学习mysql的前戏 1:基础入门命令 show databases: #查看当前MySQL中的所有数据库 create 数据库名: #创建新的数据库 use 数据库名: #使用该数据库 show ...

  4. pretty-errors：美化python异常输出以使其清晰易读

    1. 安装pretty-errors python -m pip install pretty_errors 2.如果你想让你的每一个程序都能这样在报错时也保持美貌,那么运行下面这这行命令,就不用每次 ...

  5. Mac解决：xcode-select: error: command line tools are already installed, use "Software Update" to install updates

    1.因为node项目终端报错: No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com ...

  6. springcloud vue.js 微服务 分布式 activiti工作流 前后分离 shiro权限 集成代码生成器

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  7. 深入理解 Android 中的各种 Context

    前言 网上关于 Context 的文章也已经有不少了,比如值得参考的有: Android Context完全解析,你所不知道的Context的各种细节 Android Context 到底是什么? 但 ...

  8. 在服务器上搭建远端git仓库

    推荐使用运行Liunx的机器 请获取root权限后进行下面操作 安装git # 检查是否安装了git如果有版本号就无需再安装 git -v # 安装git sudo apt-get install g ...

  9. 【转载】sql-builder介绍

    原文链接:sql-builder介绍 关于sql-builder sql-builder尝试使用java对象,通过类SQL的拼接方式,动态快速的生成SQL.它可作为稍后的开源项目ibit-mybati ...

  10. Hibernate(六)--缓存策略

    缓存: 缓存就是数据库数据在内存中的临时容器,包括数据库数据在内存中的临时拷贝,它位于数据库与数据库访问中间层,ORM在查询数据时,首先会根据自身的缓存管理策略,在缓存中查找相关数据,如果发现所需的数 ...