css 学习总结
应用样式的方式：
1：lnline Styles
<p style="font-family: sans-serif; color: #3366CC;">
Amazingly few discotheques provide jukeboxes.
</p>
2：Embedded Styles
<style type="text/css">
CSS Styles…
</style>
3：External Style Sheets
<link rel="stylesheet" type="text/css" href="styles.css" />
类得筛选器
1：Class Selectors
<p class="sidebar">This text will be white, <a class="sidebar"
href="link.html">and so will this link</a>.</p>
p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
a.sidebar:link, a.sidebar:visited {
font-weight: bold;
}
2：ID Selectors
In contrast with class selectors, ID selectors are used to select one particular element,
rather than a group of elements. To use an ID selector, first add an id attribute to
the element you wish to style. It ’s important that the ID is unique within the HTML
document:
<p id="tagline">This paragraph is uniquely identified by the ID "tagline".</p>
#tagline {
color: #FFFFFF;
}
3：Descendant Selectors
p {
color: #0000FF;
}
.sidebar p {
color: #FFFFFF;
}
<div class="sidebar">
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
</div>
4：Child Selectors
<style type="text/css">
p {
color:Green;
}
.sidebar p {
color: Red;
}
.sidebar>p {
color: Blue;
}
.tagline
{
font-size:large;
}
</style>
<div class="sidebar">
<p>This paragraph will be displayed in white.</p> 蓝色
<p>So will this one.</p>蓝色
<div class="tagline">
<p>If we use a descendant selector, this will be white too.
But if we use a child selector, it will be blue.</p>红色
</div>
</div>
<p>niouxiaopei</p>绿色
注意：Internet Explorer 6 Doesn ’t Support the Child Selector
----------------------------------------
How do I set my text to display in a certain font? 怎样去设置字体
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif，"Courier New" ; 如果字体的名称有空格要用引号
}
Fonts that you can feel fairly confident to use are: 一定包含的字体
Windows系统： Arial, Lucida, Impact, Times New Roman, Courier New, Tahoma, Comic
Sans, Verdana, Georgia, Garamond
Mac：苹果系统 Helvetica, Futura, Bodoni, Times, Palatino, Courier, Gill Sans, Geneva,
Baskerville, Andale Mono
-------------------------------------------
How do I remove underlines from my links?
a:link, a:visited {
text-decoration: none;
}
-----------------------------
How do I create a link that changes color when the cursor moves over it?
a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: red;
}
a:hover, a:active {
text-decoration: underline overline;当鼠标在上面的时候将在上面出现下划线。出现一个矩形的背景
color: #191970;
background-color: Green;
}
-----------------------------------
How do I display two different styles of link on one page?
<div class="boxout">
<p>Visit our <a href="store.html">online store</a>, for all your
widget needs.</p>
</div>
利用的样式：
.boxout {
color: #FFFFFF;
background-color: #6A5ACD;
}
.boxout a:link, .boxout a:visited {
text-decoration: underline;
color: #E4E2F6;
background-color: transparent;
}
.boxout a:hover, .boxout a:active {
background-color: #C9C3ED;
color: #191970;
}
-----------------------------------------
How do I style the first item in a list differently from the others?
<ul>
<li>Brie</li>
<li>Cheddar</li>
<li>Red Leicester</li>
<li>Shropshire Blue</li>
</ul>
解决方案1：
li:first-child {在Ie6中不支持
color: red;
}
解决方案2比较好比较通用
<li class="unusual">Brie</li>
li.unusual {
color: red;
}
-----------------------------------------------------
How do I style headings with underlines?
第一种方法：
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}
第二种方法
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 0.2em;
border-bottom: 1px solid #AAAAAA;
}
----------------------------------------------------------
How do I remove the large gap between an h1 element and the following paragraph?
第一种方法：
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: 0;
}
h1+p {
margin-top: 0;
}在Ie6中不支持
第二种方法;
h1 {
font: 1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: -0.6em;
}
----------------------------------------------------------------------
How do I highlight text on the page?
<p>These <span class="hilite">stuffed peppers</span> are lovely
as a starter or as a side dish for a Chinese meal. They also
go down well as part of a buffet, and even children seem to
like them.</p>
-----------------------------------------------------------------------
How do I alter the line height (leading) on my text? 文本行高
p {
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
-----------------------------------------------------------------
How do I justify text?文本段得右边和左边是笔直的
p {
text-align: justify;
font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}
-----------------------------------------------------------
How do I style a horizontal rule?
hr {
border: none;
background-color: #256579;
color: #256579;
height: 2px;
width: 80%;
}
-----------------------------------------
How do I indent text?
<h1>Chinese-style stuffed peppers</h1>
<p class="indent">These stuffed peppers …</p>
.indent {
padding-left: 1.5em;
}
怎样使每个段落的开头文本空格
p {
text-indent: 1.5em；
}
--------------------------------------------------------------------
怎样改变文本的大小写和第一个字母大写
.transform {
text-transform: uppercase; //capitalize（第一个字母大写）lowercase ，none默认的
}
----------------------------------------------------------------
How do I change or remove the bullets on list items?
<ul>
<li>list item one</li>
<li>list item two</li>
<li>list item three</li>
</ul>
ul {
list-style-type: square;列表前面出现方块
}
ul {
list-style-type: none;列表前面什么也没有
}
ul {
list-style-image: url(bullet.gif); 列表前面将出现图片
}
-----------------------------------------
How do I display a list horizontally?
<ul class="horiz">
<li><a href="#">Big Widgets</a></li>
<li><a href="#">Small Widgets</a></li>
<li><a href="#">Short Widgets</a></li>
<li><a href="#">Tall Widgets</a></li>
</ul>
ul.horiz li {
display: inline;
}
---------------------------------------------------------------------------
How do I remove page margins? 怎样移除页面空白
body {
margin: 0;
padding: 0;
}
移除所有元素的页面空白
* {
margin: 0;
padding: 0
}
浙公网安备 33010602011771号