css 基础教程学习

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>

原文地址：https://www.cnblogs.com/yx3445/p/12375345.html

时间： 2024-10-12 05:45:49

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

css基础教程学习

1.CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中, 或在一个外部的 CSS 文件中.甚至可以在同一个 HTML 文档内部引用多个外部样式表2.当同一个 HTML 元素被不止

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

响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和"小与或等于".如:width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML

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

一. 通用序列操作: 其实对于列表,元组 都属于序列化数据,可以通过下表来访问的.下面就来看看序列的基本操作吧. 1.1 索引: 序列中的所有元素的下标是从0开始递增的. 如果索引的长度的是N,那么所以的范围是-N~N-1之间,超过这个范围就会提示 IndexError:  index out of range >>> greeting ='Hello world' >>> print greeting Hello world >>> print gr

w3school CSS基础教程

一.基础法则: 类名的第一个字符不能使用数字,否则无法在Firefox中起作用: 不要在属性值和单位之间留空格,否则在Firefox或Netscape中无法正常工作. 二.背景(background): background-color不能继承,默认值是transparent.若一个元素未指定背景色,其背景为透明,其祖先元素的背景则可见,由此显现出来: background-position中若只出现一个关键字,则默认另一个是center:若只提供一个百分数,所提供的值作为水平值,垂直值默认为5

HTML/CSS基础教程 六

表单 包含表单元素的区域, 表单元素是允许用户在表单中(文本框, 下拉列表, 单选框, 复选框等)输入信息的元素, 使用<form>标签定义. 文本域与密码域 <form> Username: <input type="text" name="firstname"> <br /> Password: <input type="password" name="lastname"

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</

CSS基础教程——纯CSS开发的气泡式提示框

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:CSS基础教程 —— 纯CSS开发的气泡式提示框 作为前端开发人员,我们都熟悉使用CSS来生成页面上丰富的样式,对于边框border属性来说,也是我们最熟悉不过的CSS属性,今天我们这里将介绍如何使用纯CSS来生成一个气泡式样的提示框,希望大家喜欢! 在这篇文章中我们将使用:after伪标签来生成提示框的指示箭头. 首先我们定义提示框相关属性,我们添加了box阴影和文字阴影效果,这样让提示框更加漂亮: /* bubble */.tip

Python基础教程学习：深入 Python iter() 方法

今天我们来介绍下Python基础教程学习之iter() 方法另外的用法.据说很少有人知道这个用法! 一.上代码.学用法 我们都比较熟悉 iter(obj),会返现一个迭代器,如果 obj 不是可迭代对象,则会报错.但其实如果仔细看官方文档,会发现 iter() 方法其实是接受两个参数的,文档说明如下 iter(object[, sentinel]) sentinel 英文翻译为 哨兵. sentinel 参数是可选的,当它存在时,object 不再传入一个可迭代对象,而是一个可调用对象,通俗点说

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

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head