css基础

发布日期:2018-02-05    浏览次数:706

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>
多重样式
如果某个选择器同时被外部样式表和内部样式表设置样式
则这时候优先考虑内部样式表,内部样式表没有的再继承外部样式表

本文网址:https://www.wyxxw.cn/blog-detail-1-3-15.html

返回列表

非特殊说明,本文版权归原作者所有,转载请注明出处

提示:本站所有资源仅供学习与参考,请勿用于商业用途。图片来自互联网~如侵犯您的权益,请联系QQ:1067507709.

提示:转载请注明来自:https://www.cnblogs.com/xtuxiongda/p/8410753.html 。 转载人:momo