你的位置:首页 > 网页设计

[网页设计]随便写写,当作了解


Css,Cascading Style Sheets,层叠样式表。用于控制HTML页面样式。他的基本格式由两部分组成:

选择器 声明块

一、使用

css的注释用 /* 注释内容 */

1.导入外部样式表

<link rel=”stylesheet”type=”text/css”href=”myCss.css”media=”all”/>

rel:表示关系,这里的关系是“stylesheet”;如果将rel定义为“alternate  stylesheet”,他就为候选样式表,利用title属性生成候选样式列表;

type:描述link加载的数据类型;

href:样式表的位子;

media:这个样式要运用的媒体,all表示所有。

2.内嵌在页面的css

<style type=”text/css”>   /*样式表内容*/  </style> 。可以使用media属性。

3.内嵌样式表中导入外部样式表

<style type=”text/css”>

@import url(mycss.css)  media;

/* 样式表内容 */

</style>

media作用和前面的link一样,可有可无。

4.内联的样式

直接使用元素的style属性,指定p标签内的颜色为红色

<p style = “color:red”>xxxx</p>

二、选择器

1 分组

h1 , h2 , p { color : red;  }  逗号表示分组,这句表示h1,h2,p标签的字体颜色为红色。如果不要逗号,意义完全不一样。

*  { color : grey ; font-size: 80px ;}    * 是通配选择器,表示所有的标签元素 字体为灰色,大小为80像素。

2 类选择器 要区分大小写

.warning { font-weight : bold ; }  表示class值为“warning”的标签,字体全部加粗。前面有英文的句号。类选择起可以连起用 如    p.warning.help  ,他匹配的是class属性包含warning 和 help的p元素。中间没有空格。

3 id选择器 要区分大小写

#warning { font-weight : bold ; }  表示Id值为“warning”的标签,字体全部加粗。前面有井号。

p#warning 表示id为warning的p元素

用id选择器还是类选择器?

类名可以重复用,而html中标签的id是唯一的。这意味着id选择器在一个html文档中,最多只会使用一次。

4 属性选择器 [ ]

4.1根据属性选择

h1[class] { color: silver } 表示  带有class 标签的h1元素都被选择,设置字体颜色为灰色。

* [id] 表示选择所有的带有id属性的元素。其他属性选择同理。

4.2根据属性值选择

a[ href =”http://www.baidu.com”] 表示选择所有超链接等于百度的a标签。

p[ calss=”warning”] 表示选择所有class等于warning的p标签。

4.3根据部分属性值选择

p[ class~=”warning”]表示包含warning这个词的class属性,注意不是包含这个字符串,而是包含词,使用空格分开的词!他根据属性中,一个用空格分隔的词来完成选择。他等价与 p.class

p[ class ^=”warning”] 表示calss属性以字符串warning开头的p标签。

p[ class $=”warning”] 表示calss属性以字符串warning结尾的p标签。

p[ class *=”warning”] 表示calss属性包含字符串warning的p标签。

4.4后代选择器

#d1 h1{  color : red }表示id为d1元素的所有后代h1字体颜色为red。

#d1 > h1{  color : red }表示id为d1元素的所有直接子元素h1字体颜色为red。

#d2 + div{  color : red }表示id为d2元素的紧接着的一个兄弟节点div的字体为红色。

4.5伪类选择器

4.5.1链接伪类

a:link   表示未访问的超链接

a:visited  表示已访问的超链接

4.5.2动态伪类

input : focus 表示当前有输入焦点的input元素。

p:hover  表示当前鼠标停留的元素。

button : active  表示被用户输入激活的元素。

注:在a标签上设置伪类样式时,推荐是“LOVE-HA” ;link ,visited , hover , active

4.5.3静态伪类

h1:first-child   选择 作用第一个子元素的 h1 。eg:

<body>
    <h2></h2>
    <h1>d1外的h1</h1>
    <div id="d1">
        <h1>d1内的h1</h1>
        <div id="d2">
            <h1>d2内的h1</h1>
        </div>
        <h1>d1内的h1</h1>
    </div>
</body>
这个就只有中间两个被选中,因为第二个h1是d1的第一个子元素,第三个h1是d2的第一个子元素。

* : lang(fr)  选择所有法语。这个是对语言进行选择

4.6伪元素选择器

p:first-letter  选择块级元素的首字母 。常用的块级元素 p div h 。。。。

p:first-line 选择块级元素的第一行文本

注:first-letter 和 first-line 对属性的使用是有限制的,不是所有属性都有效!

h1:before {contetn: “myContetn”;} 在标签h1添加一个myContent,后面可以设置样式。

h1:after{contetn: “myContetn”;} 在标签h1添加一个myContent,后面可以设置样式。

三、关于定位和浮动

position的四个属性。

1、static:默认值。没有定位,元素出现在正常的流中。

2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。他是相当于原本位置的偏移位置,可能会覆盖其他元素。他原本的位置会保留。

3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。这种定位的元素不再正常流当中,完全被独立了的。可能会覆盖其他元素。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

他们的上下关系用z-index确定。

浮动,float:left | right | none

他会从正常流中删除,但是还是会影响布局。