- html的格式的问题
- 如何css修正格式问题
- css语言
Css其实就是一组规则。
- 样式表单
h1
{
font-size: 20px;
}
h1
{
color: Green;
}
等同于
h1
{
font-size: 20px;
color: Green;
}（建议使用）
要为页面中的一个元素编写样式，浏览器需要知道3件事：
l 页面的那个元素需要样式化？
l 元素中的那个部分需要样式化？
l 选择的部分需要怎么样式化？
Selectors
解决了页面的那个元素需要样式化。
全局selector
*
{
font-family: Arial;
}
类型selector
特指html元素
h1
{
color: Green;
}
ID
Selector
#IntroText
{
font-style: italic;
}
<p
id=”IntroText”>I am italic because I have the right ID.</p>
<p id=”BodyText”>I am NOT italic because I have a different ID.</p>
类selector
This
is normal text but <span class=”Highlight”>this
is Red and Bold</span>
This
is also normal text but
<a href=”CssDemo.aspx” class=”Highlight”>this link is Red and Bold as well</a>
分组和组合selectors
h1,
h2, h3, h4, h5, h6
{
color:
Red;
}
--------------------------------------
#MainContent p
{
font-size: 18px;
}
---------------------------------------
#MainContent
p.Highlight
{
font-size:
18px;
font-weight:
bold;
}
<div
id="MainContent">
<p
class="Highlight">Because I have a class called Highlight, my text
appears in bold</p>
<p>This
text is not bold, as it lacks the Highlight class</p>
</div>
<p class="Highlight">I am NOT bold because I don't fall within MainContent</p>
属性
Display不占空间，visibility占页面空间
值
使用shorthand
border: 1px solid
Black;
=
border-top-width:
1px;
border-top-style:
solid;
border-top-color:
Black;
border-right-width:
1px;
border-right-style:
solid;
border-right-color:
Black;
border-bottom-width:
1px;
border-bottom-style:
solid;
border-bottom-color:
Black;
border-left-width:
1px;
border-left-style:
solid;
border-left-color: Black;
其他支持shorthand还包括font,background,list-style,margin和padding。
用style builder 在css文件中为每个selector自动生成样式。
<link href=”Styles/Styles.css” rel=”stylesheet” type=”text/css” />
- 将css添加到页面中
选择外联，内部集成和内联样式
外联样式：在外部文件中编写样式，然后将文件的引用添加到页面中。
内部集成：
<head
runat=”server”>
<title>Untitled Page</title>
<style type=”text/css”>
h1
{
color: Blue;
}
</style>
</head>
内联样式：
<span
style=”background-color:
Black; color: White;”>
This is white text on a black background
</span>
尽量使用外联样式；如果想只改变一个页面而不影响其它页面，那可以用继承样式；如果只想改变一个页面中的某个元素而不影响其它元素，那可以用内联样式。
建议在header里先加入外联文件再写集成样式。
用VWD写CSS
Style Sheet toolbar (Add Style Rule dialog box)
CSS Properties Grid
Manage Styles window
Apply Styles window
Style Builder (Modify Style dialog box)
Add Style Rule window
- 在外联样式中创建新样式
用manage styles window，attach style sheet
a:visited对点击过的连接改样式
a:hover 当鼠标放到连接上时改样式
- 创建集成和内联的样式
用manage styles window，new style，选择inline或者自己写类名（.classname）
- 应用样式
Apply style工具栏
按住ctrl可以同时选中多个样式。
- 管理样式
集成样式可以在Manage styles中直接拖到外联样式中。
内联样式需要先选中相关代码段，然后在apply style中拷贝一份新的该样式到外联样式文件中，再把之前的内联样式移除。但是这是页面中的内联样式就丢失了。
