CSS--CSS入门/CSS语法/盒子模型/CSS定位

最新推荐文章于 2022-09-08 07:00:00 发布

yangruxi

最新推荐文章于 2022-09-08 07:00:00 发布

阅读量440

点赞数 1

分类专栏： JavaWeb 文章标签： css

本文链接：https://blog.csdn.net/yangruxi/article/details/73556800

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS入门

1.HTML：负责网页的结构。
CSS：负责网页的美观。

2.CSS的使用方式：
（1）行内样式：使用标签内部的style属性给每一个标签设置样式。
缺点：只能控制一个标签的样式，如果标签比较多，工作量比较大，而且更改起来比较麻烦。

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

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

<style type="text/css">
    a{
        font-size:24px;
        color:#0F0;
    }
</style>

3）外部样式（推荐使用）：在html代码的外部创建以一个css文件，css文件中写独立的css代码，使用的时候直接将css文件导入到html文件。
注意：
1）建立独立后缀为css的文件，css内容写在该文件中；
2）在使用css的html页面中，导入外部css文件。

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

CSS语法

1.选择器（selector）：使用选择器来选择需要添加样式的标签。
（1）标签选择器
作用：选择同名的标签。
语法：标签名称{css代码}

div{
        font-size:24px;
        color:#F00; 
    }

（2）类选择器
作用：选择同类的标签。
语法：.类名{css代码}

    .c1{
        font-size:24px;
        color:#F00; 
    }

注意：
1）选择的标签必须有class的属性。同类的标签使用同名；
2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先。

（3）id选择器
作用：选择一个标签。
语法：#id值{css代码}

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

注意：
1）选择的标签必须有id属性；
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById(“id属性值”)；
3）id选择器的优先级最高。

（4）并集选择器
作用：当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。

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

（5）交集选择器
作用：选择某个选择器中的子标签。
语法：外部选择器内部标签选择器{css代码}

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

（6）通用选择器
作用：选择所有的标签。

*{
    font-size:24px;
    color:#0F0;
}

（7）伪类选择器
作用：控制标签在不同状态下展示出不同的样式。

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

<style type="text/css">

使用link伪类控制–没有访问过的状态：

a:link{
    font-size:24px;
    color:#F00;
}

使用visited伪类控制–已经被访问过的状态（鼠标点下且松开）：

a:visited{
    font-size:24px;
    color:#CCC;
    text-decoration:none;
}

使用hover伪类控制-鼠标经过的状态：

a:hover{
    font-size:24px;
    color:#00F;
    text-decoration:none; 
}

使用active伪类控制–鼠标激活（按下但没有松开）的状态：

a:active{
    font-size:24px;
    color:#0F0;
    text-decoration:underline;
}

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

正确顺序： link visited hover active

2 . 常用的CSS属性和值：
CSS属性（property）：给选择的标签添加什么样式。例如，字体大小，颜色，背景…..
CSS值（value）：添加样式的具体值。12px , 红色，背景图片….

（1）CSS文本
color：颜色

**color**:#F00;

字符间距：

letter-spacing:10px;

对齐方式：

text-align:center;

文本修饰：
下划线-underline，中划线(line-through) 上划线-overline 没有:none

text-decoration:line-through;

单词间距：

word-spacing:30px;

演示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css文本</title>
<style type="text/css">

    body{
        word-spacing:30px;
    }
</style>
</head>

<body>
在这行文字上加横线
</body>
</html>

效果如下：
这里写图片描述

（2）CSS字体
字体类型 ：
注意：这里的字体类型是读取系统的默认字体库，尽量使用通用的字体，如果你设置的字体，用户的系统上没有，就是使用默认的宋体显示。

font-family:"宋体";

字体大小：

font-size:24px;

字体样式：正(normal默认) 斜(italic)

font-style:italic;

字体粗细：bold 加粗

font-weight:bold;

font简写属性 ：

font:italic bold 36px "黑体";

演示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css字体</title>
<style type="text/css">
    body{
        font:italic bold 36px "黑体";
    }
</style>
</head>

<body>
试一试
</body>
</html>

效果如下：
这里写图片描述

（3）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;

演示：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css背景</title>
<style type="text/css">

    body{
        background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;

    }
</style>
</head>

<body>
</body>
</html>

（4）CSS列表
列表符号类型：

list-style-type:none;

设置列表符号的图片：

list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);

演示：

<!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=utf-8" />
<title>css列表</title>
<style type="text/css">
    ul{
        /*列表符号类型*/
        list-style-type:none;
        /*设置列表符号的图片*/
        list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
    }
</style>
</head>

<body>
系统菜单
<ul>
    <li>学生管理</li>
    <li>教师管理</li>
    <li>课程管理</li>
</ul>
</body>
</html>

效果如下：
这里写图片描述

（5）CSS表格
合并表格的边框：

border-collapse:collapse;

演示：

<!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=utf-8" />
<title>css表格</title>
<style type="text/css">
    table{
        /*合并表格的边框*/
        border-collapse:collapse;
    }

</style>
</head>

<body>
<table border="1px" width="400px" height="200px" align="center">
    <caption>期末考试成绩单</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>班级</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>计算机1班</td>
        <td>80</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>计算机2班</td>
        <td>78</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>软件1班</td>
        <td>90</td>
    </tr>
    </tbody>
</table>
</body>
</html>

效果如下：
这里写图片描述

（6）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;

使用简写属性,设置边框样式:booder:border-width border-style border-color。

/*所有边框属性的简写属性*/
border:2px solid #F00;

演示：

<!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=utf-8" />
<title>css边框</title>
<style type="text/css">
    div{
        border:2px solid #F00;
    }
</style>
</head>

<body>
<div>div1</div>
</body>
</html>

效果如下：
这里写图片描述

盒子模型

1 . 定义：可以把html页面上每个标签看做是一个盒子。

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

图解：
这里写图片描述

CSS定位

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

div{
        width:100px;
        height:100px;
        border:10px solid #999;}
    #div1{
        background-color:#006;
                              }
    #div2{
        background-color:#0C0;}
    #div3{
        background-color:#3F0;
        /*position:relative;
        top:10px;
        left:10px;*/
        /*
        position:absolute;
        top:20px;
        left:20px;*/
        position:fixed;
        top:200px;
        left:450px;
        }

yangruxi

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS--CSS入门/CSS语法/盒子模型/CSS定位

CSS入门1.HTML：负责网页的结构。 CSS：负责网页的美观。2.CSS的使用方式：（1）行内样式：使用标签内部的style属性给每一个标签设置样式。缺点：只能控制一个标签的样式，如果标签比较多，工作量比较大，而且更改起来比较麻烦。 <a href="xxxx" style="font-size:19px;color:#090">超链接</a>（2）内部样式：使用style标签，
复制链接

扫一扫