Web开发

 

CSS的学习

基本选择器：通用/元素/类/id选择器；
复合选择器：交集/并集/后代选择器。

背景

<!-- 简单示例 -->
<style>
    body
    {
        background-image:url('img_tree.png');
        background-repeat:no-repeat;
	    /*background-repeat:x;*/	
        background-position:right top;
        margin-right:200px;
        /*background-attachment:fixed;固定图片，滚动显示*/
    }
</style>
/*     */



<!-- 简化写法，将这些属性合并在同一个属性中，background其实代表背景颜色 -->
<style>
    body
    {
        background:#ffffff url('img_tree.png') no-repeat right top;
        margin-right:200px;
    }
</style>

<!-- 
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position-->

 

文本

<!-- 简单示例，文本居中/右对齐/两侧对齐/文本缩进text-indent -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <style>
        p {text-indent:50px;}
        h1 {text-align:center;}
        p.date {text-align:right;}
        p.main {text-align:justify;}
    </style>
</head>

<body>
    <h1>CSS text-align 实例</h1>
    <p class="date">2015 年 3 月 14 号</p>
    <p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
    <p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

关于文本还有，大小写转化、文本修饰、颜色等等，具体参考这里。

 

字体

serif(衬线)和sans-serif(无衬线)字体之间的区别
二者的区别在于字体在末端没有额外的装饰。Arial就没有装饰，新罗马有，对于计算机屏幕来说，没有额外装饰的更容易阅读。

<!-- 斜体 -->
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
    p.normal {font-style:normal;}
    p.italic {font-style:italic;}
</style>
</head>

<body>
    <p class="normal">这是一个段落,正常。</p>
    <p class="italic">这是一个段落,斜体。</p>
</body>

<!-- 加粗 -->
<style>
    p.normal {font-weight:normal;}
    p.light {font-weight:lighter;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}
</style>

 

链接

<!-- 超链接的四种状态分别显示四种颜色 --> 
<!-- 下面的用法其实也是展示了后续要讲的伪类选择器 -->

<style>
    a:link {color:#000000;}      /* 未访问链接*/
    a:visited {color:#00FF00;}  /* 已访问链接 */
    a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
    a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>

<!-- 文本修饰,选择什么时候有下划线 -->
<style>
    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:underline;}
    a:active {text-decoration:underline;}
</style>

还有其超链接四种状态的显示变化，都很重要，在网页设计中。

 

选择器

派生选择器

从原有的标签派生而来，无需为 strong (随便命名)元素定义特别的 class 或 id，代码更加简洁，如下：

<head>
    <style> 
        li strong {
    font-style: italic;
    font-weight: normal;
  	}
    </style>
</head>
  
<body>  
    <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>
</body>

id选择器

id选择器和class选择器的区别是，class的属性定义好之后，可以在多种元素(h1、h2、p等等)中重复使用，而id 属性只能在每个 HTML 文档中出现一次，就是说是一次性的，用了一次就不能用第二次。另一角度看，id的唯一性，也决定了id的这种特点。

以 "#" 来定义， 例子如下：

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

类class选择器

在 CSS 中，类选择器以一个点号显示：

<!-- h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".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>

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。参考这里。

选择器的混合

元素基于类而被选择，ul.a中a就是类，ul是元素。其他list-style-image和list-style-position，参考这里。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>菜鸟教程(runoob.com)</title> 
	<style>
		ul.a {list-style-type:circle;}
		ul.b {list-style-type:square;}
		ol.c {list-style-type:upper-roman;}
		ol.d {list-style-type:lower-alpha;}
	</style>
	</head>
<body>
<p>无序列表实例:</p>
	<ul class="a">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Coca Cola</li>
	</ul>
	<ul class="b">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Coca Cola</li>
	</ul>
<p>有序列表实例:</p>
	<ol class="c">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Coca Cola</li>
	</ol>
	<ol class="d">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Coca Cola</li>
	</ol>
</body>
</html>

 

 

伪类选择器

 

阅读这里的内容。

列表

<!-- 指定列表项标记的图像，使用列表样式图像属性 -->
<style>
    ul 
    {
        list-style-image:url('sqpurple.gif');
    }
</style>

<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>


<!-- 指定列表项标记的类型 -->
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

表格

盒子模型

小Tips

  • <style>和<style type="text/css">的区别是什么，二者功能其实一样，一般写＜style></style>就行，参考原因。

  • 子类的继承：body {font-family: Verdana, sans-serif;}其实是规定了父类的显示方式，那么从父类衍生出的子类(包括 p, td, ul, ol, ul, li, dl, dt,和 dd等等)都将继承这个属性。为了照顾不支持继承的Netscape 4浏览器，必须将子类的属性都定义一下p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif; }

  • !important标记：CSS 中的 !important 规则用于增加样式的权重。 !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。具体利弊参考这里，我在我的wordpress的额外的CSS设置的时候使用了这个tag。

Pages: 1 2 3

Leave a Reply