年后,到现在都没有写点啥,主要是假期结束回到公司,就是项目了。今天在测试,我呢就偷点闲,把之前看过的XHTML总结一下,比较基础的,各位大侠表笑话撒,有问题请指正
一 css含义
CSS:
•CascadingStyle Sheet
•层叠样式表.
层叠嘛,就代表相同的代码,当给他穿上不同的“外衣”时,user看到的是不一样视觉效果。
•浏览器层叠优先级
浏览器缺省设置 <浏览者自定义样式< 开发者定义样式
如果你只写HTML代码,并没有写任何的CSS样式。在浏览器打开文件,这是你会看到,代码以一定的样式展示出来。这就是浏览器缺省设置。
二CSS加载方式
1 selector {property:value; property:value;}
比如:
例子:以链接为例
div ←Span ←#id .←className 【start】
4 样式继承
之前我认为是“就近原则”,即,样式以最近的为准覆盖。
其实这里应用到了【选择器优先级】
层叠嘛,就代表相同的代码,当给他穿上不同的“外衣”时,user看到的是不一样视觉效果。
•浏览器层叠优先级
浏览器缺省设置 <浏览者自定义样式< 开发者定义样式
如果你只写HTML代码,并没有写任何的CSS样式。在浏览器打开文件,这是你会看到,代码以一定的样式展示出来。这就是浏览器缺省设置。
二CSS加载方式
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CSSDemo.aspx.cs" Inherits="CSSDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="../jQuery_JQueryCore/CSSDome1.css" rel="stylesheet" type="text/css" />
<%-- 先将样式写在style里面,用class属性将元素和样式联系起来。内部样式表--%>
<style>
.demo{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<p style="color:Red; font-size:30px;">CSS Demo</p> <%--这样讲css和html混合在一起 ,不好维护。分离开--%>
<p class="demo">CSS Demo1</p>
</div>
</form>
</body>
</html>
•使用<link>元素链接到外部的样式文件
•在<head>元素中使用"style"元素来指定
•使用CSS"@import"标记来导入样式表单
•在<body>内部的元素中使用"style"属性来定义样式
三CSS语法
1 selector {property:value; property:value;}
比如:
p {color:Red; font-size:30px;}
2 CSS Selector 选择器
•元素(标签)选择器 Span
•类选择器 .classname
•id选择器 #id
•全局选择器 *
•继承(后代)选择器 div h1
•选择器分组 h1,h2
•伪类选择器 :hover
•CSS 属性选择器 input[type=“button”]
这里说明一下伪类选择器,因为伪类这个我当时不知道是什么。
例子:以链接为例
a { color: blue; } /* 未访问的链接*/
a:link { color: blue; } /* 未访问的链接*/
a:visited { color: purple; } /* 已访问的链接*/
a:hover { color: red; } /* 鼠标悬停在链接上*/
a:active { color: yellow; } /* 鼠标点击链接时*/
3 浏览器读取选择器的方向是:由右到左
div ←Span ←#id .←className 【start】
4 样式继承
•文本样式相关的属性会继承
•列表样式相关属性会继承
•颜色属性会继承
如果对同一句html,做了多个样式,在浏览器中该展示哪一个样式呢?
之前我认为是“就近原则”,即,样式以最近的为准覆盖。
其实这里应用到了【选择器优先级】
•elementstyle > #d > .className > div
1000 100 10 1