css样式表

最新推荐文章于 2021-10-10 19:15:00 发布

一位远方的诗人

最新推荐文章于 2021-10-10 19:15:00 发布

阅读量1k

点赞数

分类专栏：前端应用：网页样式动作 JQuery Bootstrap

本文链接：https://blog.csdn.net/qq30211478/article/details/78112018

版权

前端应用：网页样式动作 JQuery Bootstrap 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

一、CSS样式的学习

在网上看到一些好看的样式，可以直接去源代码搜索定位，参考是如何设置的。

各种样式都可以通过Dreamweaver来设置。

CSS（cascading style sheet）：层叠样式表，为网页添加样式特效。

* 相当于选择器，代表html所有的元素

1、<pre>标签：用于保留内容的格式。

<pre>内容</pre>

（一）添加CSS的三种方法

1、链接外部样式表

每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部<head>标签。

<head>

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

</head>

说明：rel：表示使用外部的样式表 type：表示文件的类型是样式表文件 href：表示文件所在位置

2、内部样式表

使用 <style> 标签在文档头部定义内部样式表。

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

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

</style>

</head>

3、内嵌样式（慎用，会损失掉样式表的很多优势）

使用标签的style属性，给标签添加样式。Style 属性可以包含任何 CSS 属性。

<pstyle="color:sienna;margin-left:20px">这是一个段落。</p>

4、多重样式的优先级

内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

（二）CSS的基本语法

CSS的语法结构由3部分组成：选择符（selector），样式属性（property）和值（value）

格式：选择符{样式属性：取值；样式属性：取值；...}

其中：属性和值成对出现，用冒号，多个属性用分号分开。

（三）CSS选择器

选择器（selector）：用于选取HTML的标签，给其添加样式。

一、id选择器：

标有特定 id 的 HTML 标签指定特定的样式，id选择器以#开头。只能使用一次，不能结合使用。每个标签的id都是唯一的，不能相同。

#para1{
text-align:center;
color:red;
}

二、类（class）选择器：

HTML标签的class属性用于规定HTML标签的类名。HTML5中，class属性可以用于所有标签，但是不一定都有用。类名的命名不能以数字开头，区分大小写。不同的标签的类名可以相同。

可以给 HTML 元素赋予多个 class，用空格分开。例如：<span class="left_menu important">。这么做可以把若干个 CSS 类合并到一个 HTML 元素。

类（class）选择器以"."显示。

实例：.center {text-align:center;}

1、结合标签选择器使用（范围更加确定）

p.important {color:red;}

2、多类选择器（不常用，因为没有必要这么麻烦）

一个 class 值中可能包含一个词列表，各个词之间用空格分隔。

三、标签选择器，多个标签选择器用逗号分开。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

四、派生选择器允许你根据文档的上下文关系来确定某个标签的样式。又称为后代选择器

li strong {
    font-style: italic;
    font-weight: normal;
  }

五、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。即通过属性来选择对应的标签。

a[href] {color:red;}

六、子选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。子结合符两边可以有空白符，这是可选的。

h1 > strong {color:red;}

七、伪类选择器（pseudo classes）

CSS 伪类用于向某些选择器添加特殊的效果。

伪类的语法：

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

selector.class : pseudo-class {property: value}

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

八、伪元素（pseudo element）

CSS 伪元素用于向某些选择器设置特殊效果。

伪元素的语法：

selector:pseudo-element {property:value;}

CSS 类也可以与伪元素配合使用：

selector.class:pseudo-element {property:value;}

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2