WEB_HTML基础（二）

CSS:

它为网页提供表现的形式

网页的结构与数据：写在.html文件里

网页的表现形式写在css文件里

网页的行为写在js文件里

这样可以把网页的数据、表现、行为进行分离

<html>

    <head></head>

    <body>

    <!-- 早期会把网页的表现行式放在页面当中 -->

       <font color="red" size="6"> hello World </font>

    </body>

</html>

早期会把页面的表现行式把页面当中，这样写在一起不好维护

后来就把行为单独的写在一个文件当中

body{

    color:red;

    font-size:60px;

}

这个单独放在一个style.css文件当中，在页面当中把这个文件引入进来

<html>

    <head>

       <!-- 把页面的表现加入进来 -->

       <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

       hello World

    </body>

</html>

CSS选择器：

选择器：用来定义如何查找html标记，浏览器会跟据选择器去找到相应的标记然后在这个标记当中使用相应的标记

标记选择器：

标记的名称｛

         属性名:属性值;

｝

比如：

body{

         color:red;

}

p{

         color:green;

}

上面的css文件当中用了两个标记名来作为选择器，只要是这两个标记的都会使用上面定义的样式。

class选择器

.选择器的名称｛

         属性名:属性值;

｝

这样的话在html当中只要是标记为与选择器相同名的class属性都会被选择

标记名称.选择器名称｛

         属性名：属性值;

｝

这样的话只会在html当中是相应标记下的并且有与选择器相同名的class属性的元素才会被选中

id选择器：

#选择器名称｛

         属性名：属性值;

｝

在html当中被标记为与选择器名称相同的id属性的元素会被选中，在同一个html当中id属性是唯一的

选择器的分组：

比如:

h1,h2,h3{

         color:green;

}

对以,这个隔开的选择器使用相同的样式

选择器的派生：

#d2 p{

         font-size:120px;

}

这个表示对于id为d2的标记内部的所有p标记的字体使用字体为120px样式

注意对于样式来说的话子标记会继承父标记的样式，也就是说在外层的标记中使用的样式会影响到内层标记上

这样的话则样式有可以内部与外部会有冲突的地方因而会有样式的优先级：

从高到低:内联、内部、外部、默认

display属性：

它有三个值分别是：

none:表示不显示这个标记

block:表示按块标记的方式显示

inline表示按行标记的方式来显示

position属性：

它有三个值：

static(默认)：浏览器会按从左到右从上到下来摆放标记

absolute:相对父标记进行偏移

relative:按默认的方式摆放然后再偏移

常见的属性：

文本：

font-size:字体大小

font-family:字体名

font-style:风格

font-weight:粗细

text-align:对齐方式

text-decoration:加上下划线

cursor:光标的形状

背景：

background-color:背景颜色

background-image:背景图片

background-repeat:平铺方式

background-position:位置

background-attachment:依附方式，默认是scrol

边框：

border:1px solid red;

border-left

border-right

border-botton

border-top

定位：

width:100px;

height:200px;

margin:

margin-left:20px

margin-top:30px;

margin-right:40px;

margin-bottom:50px;

可以简化为 margin 30px 40px 50px 20px; 注意是：顶、右、底、左

margin :20px auto;一种是上下各20，左右平均分配

内边框

padding:

padding-left:20px;

padding-top:30px;

padding-right:40px;

padding-bottom:50px;

padding:30px 40px 50px 20px

列表中list-type-type:none

这样会取消列表的选项的符号

float:表示浮动，clear:both表示取消浮动的影响指的是告诉虽然浮动的标记让出了位置但是是不可以使用的

链接的样式：

a:link{color:red}没有访问过

a:visited{color:blue}访问过

a:active{鼠标点击但是还没有放开时}

a:hover{color:aqua}鼠标指向时