css 博客分类：编程基础

程序员文章站 2024-03-04 17:50:06

...

一、如何创建 CSS

插入样式表的方法有三种：

1.外部样式表

<head>

<link rel="stylesheet" type="text/css"

href="/YGFMISWebRes/html/component/css/jquery.ygsoft.common.css"/>

</head>

2. 内部样式表(在html中,位于 <head> 标签内部)

<head>

<style type="text/css">

hr {color: sienna;}

p {margin-left: 20px;}

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

</style>

</head>

3. 内联样式（在 HTML 元素内部）

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

This is a paragraph

</p>

优先级：内联样式 > 内部样式表 > 外部样式表

二、CSS选择器

1. id 选择器

ID属性用于定义一个元素的独特的样式。

DOM中id= sidebar的样式定义。

#sidebar {

border: 1px dotted #000;

padding: 10px;

}

2. 类选择器（class）

1) class = center的样式定义。

.center {text-align: center}

2) 可以为对象的 class 属性(特性)指定多于一个值( className )，其方法是指定用空格隔开的一组样式表的类名。例如：<div class="class1 class2">。注：id不可以用此方法。

3. 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、td、a。

td { font-size:14px; width:120px; }
a { text-decoration:none; }

4. 包含选择器（后代选择器）E1 E2 { sRules }

1) 实例：

table td { font-size:14px; }
div.sub a { font-size:14px; }

2) 在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

可以是ID选择器和类选择器之间相互包含，实用范围非常大。

5. 组选择器 E1 , E2 , E3 { sRules }

1) 实例：

.td1, div a, body { font-size:14px; }
td, div, a { font-size:14px; }

2) 将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式并为组。

6. 子对象选择器 E1 > E2 { sRules }

1) 实例：

h1 > strong {color:red;}

//这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：

<h1>This is <strong>very</strong> important.</h1>

2) 如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器（Child selector）。

7. 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

8. 属性选择器

对带有指定属性的 HTML 元素设置样式。

[title] { color:red; }

input[type="text"]

{

background-color:yellow;

}

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

注：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。IE6 及更低的版本不支持属性选择器。

三、伪类及伪对象

css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#ff0000;}

1. 伪类

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

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

2. 伪对象

语法：（伪对象选择符共有4种）

1). Selector:first-letter

2). Selector:first-line

3). Selector:before

4). Selector:after

说明：

1). 设置对象内的第一个字符的样式表属性。此伪对象仅作用于块元素。内联元素要使用该伪对象，必须先设定对象具有块元素的表状。

2). 设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先设定对象具有块元素的表状。

3). 用来和content属性一起使用，设置在对象前（依据对象树的逻辑结构）发生的内容。

4). 用来和content属性一起使用，设置在对象后（依据对象树的逻辑结构）发生的内容。

注：first-letter和:first-line目前所有主流浏览器均支持；:before和:after非IE核心浏览器及IE8支持。

上一篇： ASP.NET中ListView(列表视图)的使用前台绑定附源码

下一篇： Spring Boot中优雅的获取yml文件工具类

css 博客分类：编程基础