欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css基础

程序员文章站 2022-04-10 22:22:20
1.当同一个HTML元素被不止一个样式定义时，优先级如下：1）内联样式（在html元素内部）2）内部样式表(标签内)3)外部样式表4）浏览器缺省设置 2.css规则主要有选择器以及一条或多条声明构成例：h1{color:red; font-size:14px;}若值为若干单词，需要给值加 ......

1.当同一个HTML元素被不止一个样式定义时，优先级如下：
1）内联样式（在html元素内部）
2）内部样式表(<head>标签内)
3)外部样式表
4）浏览器缺省设置


2.css规则主要有选择器以及一条或多条声明构成
例：h1{color:red; font-size:14px;}
若值为若干单词，需要给值加引号
p {font-family: "sans serif";}


3.选择器分组
例子：所有标题分享相同声明
h1,h2,h3,h4,h5,h6 {
color: green;
}


4.派生选择器

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

体现如下：<p><strong>粗体字，不是斜体字，因为不在列表当中，所以这个规则对不起作用</strong></p>
<ol>
<li><strong>斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>正常的字体。</li>
</ol>


5.id选择器（id 属性只能在每个 HTML 文档中出现一次）
#red {color:red;}
#green {color:green;}
id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

用id选择器来建立派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。


6.类选择器
1）类选择器以一个点号显示
.center {text-align: center}
所有拥有 center 类的 HTML 元素均为居中。


2）class也可用作派生选择器
.fancy td {
color: #f60;
background: #666;
}
类名为 fancy 的表格单元将是带有灰色背景的橙色。


7.属性选择器
[title]
{
color:red;
}
为带有 title 属性的所有元素设置样式

[title~=hello] { color:red; }
包含指定值的 title 属性的所有元素设置样式

[lang|=en] { color:red; }
包含指定值的 lang 属性的所有元素设置样式

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}

为表单设置样式


8.插入样式表的三种方式
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式
如果某个选择器同时被外部样式表和内部样式表设置样式
则这时候优先考虑内部样式表，内部样式表没有的再继承外部样式表

上一篇： Linux就该这么学04学习笔记

下一篇： 一条SQL查询语句是如何执行的？

推荐阅读