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. Java基础之六、Java编程思想（8-10）

    八.多态 多态(也称作动态绑定.后期绑定或运行时绑定) 域(成员变量)是不具有多态性的,只有普通的方法调用是多态的,任何域访问操作都将由编译器解析,因此不是多态的 静态方法也是不具有多态性的 publ ...

  2. $.getJSON获取json数据失败

    首先简单介绍下 $.ajax  $.get  $.post  $.getJSON 的区别和用法 $.ajax中有一个type属性,专门用来指定是get请求还是post请求的分别对应的就是$.get和$ ...

  3. html文件如何下载文件

    HTML中下载文件两种方法:a标签下载:js下载; <!-- 网页地址和图片地址同源的情况下这样是可以的,不同源则是直接打开这个地址 --> <!-- 方法一:同源情况下载 --&g ...

  4. Oracle列转行 参数动态传入iBatis使用示例

    Oracle行转列 参数动态传入iBatis使用示例 最近做了一个需求,需要获取工作流数据的各个节点的渠道数量信息,各渠道的费用信息~ 之前的需求是只需要获取渠道数据,所以做了渠道兼容,每个渠道数量的 ...

  5. java 企业 网站源码 模版 屏幕自适应 有前后台 springmvc SSM 生成静态化

    前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...

  6. iMacros 入门教程-内置变量介绍（5）

    iMacros 的变量类型 1.!VAR0 到 !VAR9,这是系统定义的内置变量,专门给你赋值用 就是程序设定了这几个名字给你赋值 2.内建变量 就是 imacros 设定的特别作用的变量,例如 ! ...

  7. dir()和vars()的区别就是

    ------------恢复内容开始------------ dir()只打印属性(属性,属性......) 而vars()则打印属性与属性的值(属性:属性值......) >> a='a ...

  8. mysql升级到5.7

    最近遇到一个问题,执行下列语句会报错: CREATE TABLE `t_user` ( `USER_ID` bigint() NOT NULL AUTO_INCREMENT COMMENT '用户ID ...

  9. The ADB binary found at ... 虚拟机运行错误

    虚拟机问题,可以说差点扼杀我开发 APP 的乐趣,哼,最后请教了一下辉哥(学长),终于解决 —— 用真机调试.下面是步骤: 首先,检查一下真机连接需要的 SDK 是否安装,未安装,勾选进行安装 接着用 ...

  10. Mac brew update 慢~~~

    正题开始之前, 如果对 Homebrew 不太了解, 这里有一篇很好的介绍文章: macOS 包管理工具 Homebrew 不完全指南 花个几分钟读一下, 绝对超值! 正题 Homebrew 通过 G ...