CSS学习

来源：互联网发布：xbox你的网络尚未设置编辑：程序博客网时间：2024/06/06 02:55

CSS学习

CSS基本概念

CSS（Cascading Style Sheet 层叠样式表）简称，样式。主要负责网页的美观。

CSS和HTML：HTML:负责网页的结构；CSS负责：负责网页的美观。

CSS的三种使用方式

行内样式

1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式

<a href="xxxx" style="font-size:19px;color:#090">超链接</a>

内部样式

1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式 3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css样式</title><style type="text/css">    a{font-size:18px;    color:#CC00CC;    background-color:#66FF00;    }</style></head><body>    <!--    这里第一个链接是使用行内样式进行定义    -->    <a href="3.qq.html" target="_blank" style="background-color:#00006;font-size:30px; ">这是一个链接</a><br/><br/></body></html>

外部样式

1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

<!-- 导入外部css文件    href  : 表示外部css文件的位置    rel: 表示关联的是样式表-->    <link href="01.css" rel="stylesheet"/>

CSS语法

内部样式

 <style type="text/css">    a{font-size:18px;    color:#CC00CC;    background-color:#66FF00;    }</style>

1. 选择器（selector）：使用选择器来选择需要添加样式的标签。

如这里的 a

2. CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景…..

font-size、color、background-color……

3. CSS值（value）：添加样式的具体值。12px , 红色，背景图片….

font-size:18px;18px为属性值。

CSS选择器

标签选择器
如 body,p,a,div等；
类选择器，需要在标签中加入class属性；
如下是选择 class=a1的类，它需要在html页面中进行说明；
```
<a href="" target="_blank" class="a1">这是一个链接</a>
```

然后在style中进行选择，设置CSS样式：

.a1{    font-size:24px;    background-image:url(key.jpg);    background-repeat:no-repeat;}

id选择器
在html页面的a标签中说明id值：

<a href="" target="_blank" class="a1" id="newlink">这是一个链接</a><br/><br/>

选择id为newlink设置样式：

#newlink{    background-color:#0000FF;    font-family:Arial, Helvetica, sans-serif;    font-size:large;}

通用选择器、并集选择器、交集选择器
通用选择器：使用 *
```
*{    font-size:24px;    color:#0F0;}
```

并集选择器：使用逗号分开

 .c1,#d1{        font-size:24px;        color:#0F0;    }

交集选择器：使用空格分开

.c1 span{         font-size:24px;        color:#0F0;    }

伪类选择器
作用：控制标签在不同状态下的样式。

标签有四种状态：        link: 没有访问过的状态        hover: 鼠标经过的状态        active:鼠标激活（按下但没有松开）的状态        visited: 已经被访问过的状态（鼠标点下且松开）

在html页面中有一个链接：

    <div id="d1">        <a href="3.qq.html" target="_blank">link</a>

在style中设置样式：

        div a:link{            font-size:30px;            color:#009900;            background-color:#99CCFF;        }        div a:visited{            font-size:30px;            color:#0000FF;        }        div a:hover{            font-size:30px;            color:#FFCC99;        }        div a:active{            font-size:30px;            color:#003300;        }

*1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有*
效的。

    正确顺序： link visited hover active

CSS常用属性和值

CSS文本

此图片引用w3school网站。

wschool CSS学习

CSS字体

font-family:"宋体";font-size:24px;font-style:italic;font-weight:bold;font:italic bold 36px "黑体";

CSS设置字体简写格式：

font:italic bold 36px "黑体";

CSS背景

/*背景颜色*/            /*            background-color:#0CF;            */            /*背景图片*/            /*            background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);            */            /*设置背景图片是否重复，或如何重复                not-repeat: 不重复                repeat-x: x轴重复                repeat-y: y轴重复                repeat: x和y轴重复(默认)            */            /*            background-repeat:no-repeat;            */            /*设置背景的起始位置*/            /*            /*需要画图详细讲解*/            background-position:top center;            */            /*简写属性*/            background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

CSS列表

/*列表符号类型*/    list-style-type:none;    /*设置列表符号的图片*/    list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);

CSS表格

table{ /*设置背景*/    background-color:#99CCCC;    border-collapse:collapse;    border:solid;    }

CSS边框

        /*边框颜色*/        /*简写属性          1) 默认设置方向属性： 上 右 下 左          2）如果当前方向没有设置颜色，那么取对面的颜色        */        /*        border-color:#F00;        */        /*        border-left-color:#F00;        border-right-color:#0F0;        border-top-color:#00F;        border-bottom-color:#C90;        */        /*边框宽度*/        /*简写属性*/        /*        border-width:10px;        */        /*        border-left-width:10px;        border-right-width:20px;        border-top-width:30px;        border-bottom-width:40px;        */        /*边框样式(注意： 边框只有加了border-style才会显示出来)        solid: 单实线        dashed:虚线        dotted: 点        double: 双实线        */        /*简写属性*/        /*        border-style:solid;        */        /*        border-left-style:solid;        border-right-style:dashed;        border-top-style:dotted;        border-bottom-style:double;        */        /*所有边框属性的简写属性*/        border:2px solid #F00;

CSS设置盒子模型

盒子相关的属性：
宽度和高度（width和height）：决定这个盒子的容量
内边距（padding）：盒子边框与内容的距离
边框（border）：盒子的厚度
外边距（margin）：盒子与盒子之间的距离

.dd2{    width:800px;    height:300px;    border:10px solid #CCCCFF;    background:#999999;    padding:15px;    margin:15px;}

CSS定位

相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

阅读全文

0 0