css学习笔记1

Posted 2020-07-11

css基本语法
selector {declaration1; declaration2; ... declarationN }
declaration property:value, declaration使用分号分割,最后一条声明后建议添加‘;‘作为结束
如果属性中包含空格,需要给属性值添加双引号""
css本身不区分大小写,但是应用于html时,class和id名称是大小写敏感的

1.分组选择器
h1,h2,h3,h4,h5,h6 {
color: green;
}

2.派生选择器
li strong {
font-style: italic;
font-weight: normal;
}

仅对<li><strong></strong></li>标签内元素生效

3.id选择器
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id 选择器和派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

只对id为sidebar内的p元素生效

4.类选择器
.center {text-align: center}
类选择器以一个点号显示

.center {text-align: center}
<h1 class="center">
    This heading will be center-aligned
</h1>
<p class="center">
    This paragraph will also be center-aligned.
</p>
class匹配的元素都会生效

和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}

对class="fancy"内元素的 td元素生效

元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
对且仅对class为fancy的td元素生效
<td class="fancy"></td>

5.属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

下面的例子为带有 title 属性的所有元素设置样式：

属性选择器>>
[title]
{
color:red;
}
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

属性和值选择器>>
[title=W3School]
{
border:5px solid blue;
}
<img title="W3School" src="/i/w3school_logo_white.gif" />
<a title="W3School" href="http://w3school.com.cn">W3School</a>

属性和值选择器 - 多个值>>
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</p>

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>

设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;

font-family: Verdana, Arial;
}

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

<form name="input" action="" method="get">
    <input type="text" name="Name" value="Bill" size="20">
    <input type="text" name="Name" value="Gates" size="20">
    <input type="button" value="Example Button">
</form>

在html内应用css，和多重样式定义
http://www.w3school.com.cn/css/css_howto.asp