css样式定义标记(. # html)

最新推荐文章于 2022-07-22 19:47:30 发布

HorseRunningNoStop

最新推荐文章于 2022-07-22 19:47:30 发布

阅读量1.5k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/horserunningnostop/article/details/51424780

版权

PHP 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

css样式进行设置：

1、xxx 则xxx 是类名，用的时候加上：class="xxx"；

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

例子1:

.center {text-align: center}

<span style="background-color: rgb(255, 255, 255);"><span style="color:#ff0000;"><h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p</span></span>

同样可在该类样式下，对不同html标记进行处理。

.fancy td {
	color: #f60;
	background: #666;
	}

或者

td.fancy {
	color: #f60;
	background: #666;
	}

2、#xxx则为定义id，用的时候加上：id="xxx"

例子1：

<span style="white-space:pre">	</span>#red {color:red;}
<span style="white-space:pre">	</span>#green {color:green;}

<span style="color:#ff6666;"><span style="white-space:pre">	</span><p id="red">这个段落是红色。</p>
<span style="white-space:pre">	</span><p id="green">这个段落是绿色。</p></span>

例子2：

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

对id=“sidebar”中的p和h2的格式作了进一步的规定。

3、派生选择器(html)

例子1：

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

<span style="color:#ff0000;"><p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol></span>

例子2：

xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

css:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }

to
  {
  font-size:28px;
  display: block;
  }

from
  {
  font-size:28px;
  display: block;
  }

heading
  {
  color: red;
  font-size:60px;
  display: block;
  }

body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

4、分组标记

例子1：

h2, p {color:gray;}

例子2：

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

5、伪类

例子1：

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */

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

6、伪元素

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

例子：

p.article:first-letter
  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>

参照：http://www.w3school.com.cn/css/css_align.asp

HorseRunningNoStop

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录