java学习【web基础-css入门】

最新推荐文章于 2023-03-28 20:58:40 发布

huiyan_edu

最新推荐文章于 2023-03-28 20:58:40 发布

阅读量228

点赞数

本文链接：https://blog.csdn.net/huiyan_edu/article/details/73608629

版权

1 CSS入门
1.1 引入
html：负责网页的结构
css：负责网页的美观（样式）
1.2 体验

<!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>无标题文档</title>
<style type="text/css">
    a{
        font-size:18px;
        color:#F00;}
</style>
</head>

<body>
<a href="">超链接</a><br />
<a href="">超链接</a><br />
<a href="">超链接</a><br />
<a href="">超链接</a><br />
</body>
</html>

1.3 定义
CSS（Cascading Style Sheet 层叠样式表）简称，样式。
主要负责网页的美观。
1.4 css的使用方式
1）行内样式

注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
<a href="xxxx" style="font-size:19px;color:#090">超链接</a>

2）内部样式

注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
<style type="text/css">
a{
    font-size:24px;
    color:#0F0;
                }
</style>

3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

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

<!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>无标题文档</title>

<!--
    <style type="text/css">
        /*1.使用选择器选中你要设置样式的标签
          2.给标签设置样式,  样式属性:样式值
        */
        a{
            font-size:36px;
            color:#0F0}

    </style>
-->

<!--将外部的css文件导入此html代码中-->
<link href="1.css" rel="stylesheet" />


</head>
<!--
css的使用方式:
1.行内样式:使用标签内部的style属性给每一个标签设置样式
缺点:一次只能给一个标签设置样式,如富哦标签比较多,工作量比较大,而且更改起来比较麻烦


2.内部样式:使用style标签,给style标签中写css的样式代码
缺点:css代码和html代码混杂在了一起,管理起来比较麻烦


3.外部样式(推荐):在html代码的外部,创建一个css文件,css文件中写独立的css代码,使用的时候,直接将css文件导入到html文件中即可
<link href="1.css" rel="stylesheet" />
href  : 表示外部css文件的位置
rel: 表示关联的是样式表

-->
<body>
<a href="" >超链接</a><br />
<a href="" >超链接</a><br />
<a href="" >超链接</a><br />
<a href="" >超链接</a><br />
</body>
</html>

    a{
        font-size:36px;
        color:#0F0}

2 CSS语法

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

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

2.1 选择器
标签选择器

    作用： 选择同名的标签
div{
        font-size:24px;
        color:#F00; 
    }
注意：
    1）选择到所有同名的标签

类选择器

    作用： 选择同类的标签
/*类选择器*/
    .c1{
        font-size:24px;
        color:#F00; 
    }
注意：
    1）选择的标签必须有class的属性。同类的标签使用同名
    2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！

id选择器

    作用： 选择一个标签
#d1{
        font-size:24px;
        color:#0F0;
    }
注意：
    1）选择的标签必须有id属性。
    2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
    3）id选择器的优先级最高！

并集选择器

/*并集选择器*/
    .c1,#d1{
        font-size:24px;
        color:#0F0;
    }
    作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。

交集选择器

/*交集选择器
    div里面的span标签
    */
    .c1 span{ 
        font-size:24px;
        color:#0F0;
    }

    作用： 选择某个选择器中的子标签。

通用选择器

/*通用选择器*/
*{
    font-size:24px;
    color:#0F0;
}
    作用； 选择所有的标签

<!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>无标题文档</title>
<style type="text/css">
/*标签选择器*/
div{
    font-size:14px;
    color:#F00;}


/*类选择器,给div1和div2设置样式*/
/*.c1{
    font-size:16px;
    color:#00F;}*/

/*使用id选择器给div1设置样式*/
#d1{
    font-size:24px;
    color:#600;}


/*将div4和div5的c2样式设置为和c1完全相同*/
/*.c2{
    font-size:16px;
    color:#00F;
    }*/

/*当c1和c2中的css代码相同的时候,我们就可以使用并集选择器将两个选择其中的代码进行抽取,形成一个并集选择器*/ 
.c1,.c2{
    font-size:16px;
    color:#00F;
    }

/*给div中的span标签设置一个样式,交集选择器*/
div span{
    font-size:36px;
    color:#006;
    }


</style>

</head>

<body>
<div id="d1">div1</div><br />
<div class="c1">div2</div><br />
<div class="c1">div3</div><br />
<div class="c2">div4</div><br />
<div class="c2">div5</div><br />
<div><span>div中的span标签</span></div><br />
<span>独立的span标签</span>

</body>
</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=utf-8" />
<title>无标题文档</title>
<!--
设置伪类选择器的时候,设置不同状态是有一定的顺序的(link-visited-hover-active)
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
-->

<style type="text/css">
    a:link{
        /*在a标签的link状态下需要展示的样式*/
         font-size:24px;
         color:#00F;
        }


    a:visited{
        font-size:24px;
        color:#900;
        }

    a:hover{
        font-size:24px;
        color:#F00;
        text-decoration:line-through;
        }

    a:active{
        font-size:24px;
        color:#9F0;
        }


</style>
</head>

<body>
<a href="3.css语法及选择器.html">伪类选择器</a>
</body>
</html>

标签有四种状态：

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
    */
    </style>
    </head>

    <body>
    <a href="01.css入门.html">超链接</a>
    </body>
    </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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*使用类选择器选中下面的三行*/
.c:hover{
    background-color:#036;
    }
</style>

</head>

<body>
<table border="1" align="center" width="400px" height="300px">
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>


<tr class="c">
<td>刘德华</td>
<td>java</td>
<td>60</td>
</tr>

<tr class="c">
<td>张学友</td>
<td>java</td>
<td>70</td>
</tr>

<tr class="c">
<td>郭富城</td>
<td>java</td>
<td>80</td>
</tr>

</table>

</body>
</html>

2.2 常用的CSS属性和值
CSS文本

<!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>无标题文档</title>
<style type="text/css">
div{
    /*设置字符间距*/
    letter-spacing:4px;

    /*设置文本的位置*/
    text-align:center;

    /*给文本设置上划/下划/中划线*/
    text-decoration:underline;

    /*设置词语和词语之间的间距,设置之前需要分词,每个词语之间使用空格隔开*/
    word-spacing:10px;
    }

</style>
</head>

<body>
<div>中国 共产党 万岁</div>
</body>
</html>

CSS字体

<!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>无标题文档</title>
<style type="text/css">
    div{
        /*设置字体*/
        /*font-family:"黑体";*/

        /*设置字体大小*/
        /*font-size:36px;*/

        /*设置字体样式*/
        /*font-style:italic;*/

        /*设置字体的粗细*/
        /*font-weight:bold;*/

        /*字体设置的简写属性,一定要注意属性的顺序*/
        font:italic bold 36px "黑体";
        }

</style>
</head>

<body>
<div>中国共产党万岁</div>
</body>
</html>

CSS背景

<!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>无标题文档</title>
<style type="text/css">
    body{
        /*给标签设置背景颜色*/
        /*background-color:#006;*/

        /*将背景设置为图片*/
        /*background-image:url(05.%E7%B4%A0%E6%9D%90/mm.jpg);*/

        /*设置背景图片的重复规则
        repeat:默认显示的重复方式,x,y方向都重复
        repeat-x:设置图片仅在x方向上重复
        repeat-y:设置图片仅在y轴方向上进行重复
        no-repeat:图片不重复
        */
        /*background-repeat:no-repeat;*/

        /*设置图片的位置*/
        /*background-position:top right ;*/

        /*设置图片背景的简写样式*/
        background:#006 url(05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top right;
        }

</style>

</head>

<body>
</body>
</html>

CSS列表

<!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>无标题文档</title>
<style type="text/css">
    ul{
        /*设置列表选项前面的样式*/
        /*list-style-type:circle;*/

        /*将图片设置为列表选项的一个标记*/
        /*list-style-image:url(05.%E7%B4%A0%E6%9D%90/start.jpg);*/

        /*列表样式的简写属性*/
        list-style:url(05.%E7%B4%A0%E6%9D%90/start.jpg);
        }

</style>
</head>

<body>
<ul>
<li>章子怡</li>
<li>刘亦菲</li>
<li>刘诗诗</li>
</ul>

</body>
</html>

CSS表格

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

</style>

</head>

<body>
<table border="1" align="center" width="400px" height="300px">
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>

<tr class="c">
<td>刘德华</td>
<td>java</td>
<td>60</td>
</tr>

<tr class="c">
<td>张学友</td>
<td>java</td>
<td>70</td>
</tr>

<tr class="c">
<td>郭富城</td>
<td>java</td>
<td>80</td>
</tr>

</table>

</body>
</html>

CSS边框

<!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>无标题文档</title>
<style type="text/css">
div{
    width:300px;
    height:200px;

    /*必须首先设置边框的样式之后,边框的颜色才可以显示*/
    /*border-color:#F00;*/

    /*给四个边框非别设置不同的颜色*/
    /*
    border-top-color:#0F0;
    border-bottom-color:#063;
    border-left-color:#9C0;
    border-right-color:#F00;*/


    /*设置边框的样式*/
    /*border-style:solid;*/
    /*实线:solid*/
    /*border-left-style:solid;*/

    /*点划线:dotted*/
    /*border-top-style:dotted;*/

    /*双实线:double*/
    /*border-right-style:double;*/

    /*虚线:dashed*/
    /*border-bottom-style:dashed;*/

    /*设置边框的宽度*/
    /*border-width:5px;*/
    /*border-left-width:1px;
    border-top-width:3px;
    border-right-width:6px;
    border-bottom-width:9px;*/

    /*使用简写属性,设置边框样式:booder:border-width border-style border-color*/
    /*这个简写属性必须牢记*/
    border:2px solid #F00;
    }

</style>

</head>

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

3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。

通过需求讲解盒子模型：
1.将盒子的宽高变为之前的两倍
2.将盒子厚度变为原来的两倍
3.盒子里面的内容距顶部内10px
4.盒子里面的内容距离左内边10px
5.下面的盒子距离上面的盒子10px(两种方式实现)

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

<!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>无标题文档</title>
<style type="text/css">
div{
    width:100px;
    height:100px;
    border:6px solid #900;}


#d1{
    width:200px;
    height:200px;
    padding-top:10px;
    padding-left:10px;
    margin-bottom:10px;}

</style>

</head>

<body>
<div id="d1">div1</div>
<div>div2</div>
</body>
</html>

4 CSS定位（画图解释）
这里写图片描述
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变)

<!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>无标题文档</title>
<style type="text/css">


div{
    width:100px;
    height:100px;
    border:3px solid #F00;}

#d2{
    /*相对定位,相对于自己之前的位置*/
    /*
    position:relative;
    top:20px;
    left:20px;*/


    /*绝对定位:相对于自己的父标签而言的*/
    /*
    position:absolute;
    top:20px;
    left:20px;*/

    /*固定定位:相对于浏览器而言*/
    position:fixed;
    left:500px;
    top:300px;

    }

</style>

</head>

<body>
<div>div1</div>
<div id="d2">div2</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

huiyan_edu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java学习【web基础-css入门】

1 CSS入门 1.1 引入 html：负责网页的结构 css：负责网页的美观（样式） 1.2 体验<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt
复制链接

扫一扫