CSS入门

最新推荐文章于 2023-12-01 16:32:15 发布

原创最新推荐文章于 2023-12-01 16:32:15 发布 · 531 阅读

3 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS的基本用法，包括如何设置网页样式、选择器的使用、文本属性、字体设置、背景设置等，并深入讲解了盒子模型和定位的概念。

一，CSS入门
HTML：负责网页的结构，
CSS：负责网页的美观（样式）
可以用来设置网页的样式：

<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>

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"/>

3.CSS语法和选择器

<!--
css语法:
a{
font-size:36px;
color:#008800;
}
主要包含以下三部分内容:
选择器
css样式属性
css样式属性的值

css中的选择器:
1.标签选择器:选中同名的所有标签    
语法:标签名称{ css代码}


2.类选择器:选中所有同名的类的标签
使用规则:标签内部必须有class属性
使用语法:
.类名{css代码}
注意:当一个标签同时被标签选择器和类选择器同时选中的时候,类选择器起作用,类选择器相对于标签选择器的优先级更高


3.id选择器
使用规则:标签内必须有id属性,选中对应的id的值的标签进行样式的设定
语法:#id值{css样式}
注意:
1.当一个标签同时被标签选择器,类选择器,id选择器同时选中的时候,id选择器起作用,此时id选择器的优先级最高
2.在一个网页中不允许存在同名的id值,以后我们在我们js中经常会通过标签的id属性去点对点的找到对应的标签

4.并集选择器
当多个选择器中的css代码相同的时候,我们可以使用并集选择器,对这些css代码进行抽取

5.交集选择器:作用是选中某一个标签中的子标签(外标签 内标签)
语法:
    外部选择器 内部标签选择器{css代码}

-->
<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>

注意：当一个标签同时被多个选择器选中时，标签的范围越小，优先级越高
4.伪类选择器

<!--
伪类选择器:可以控制标签在不同的状态下展示出的不同的样式
link:没有访问过的状态
hover:鼠标划过的状态
active:鼠标按下没有松开的状态
visited:已经访问过的状态

设置伪类选择器的时候,设置不同状态是有一定的顺序的(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>

注意：伪类选择器对于链接的不同状态是有不同的要求的
1.在CSS定义中hover必须置于link，和visited的之后
2.active必须置于hover之后才是有效的
3.伪类名称对大小写不敏感
练习：使用伪类选择器，让鼠标经过表格时，会给改变颜色

<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>

6.CSS文本属性和值

<style type="text/css">
div{
    /*设置字符间距*/
    letter-spacing:4px;

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

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

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

</style>
</head>

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

注意：在改变字符的空间的时候，可以将字符直接改变，如果要改变每一个词语之间的空隙，必须要提前将词语的划分好。
7.字体的大小，颜色，字体类型

<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>

注意：在使用字体属性的时候，可以有两种方法的，一种是利用的font——每个属性的值，可以逐一设置，当然也可以利用font属性中的每一个值，直接去设置，但是必须按照一定的顺序
这里写图片描述
8。设置背景

<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>

注意：在这里设置的图片的位置属性：top left, top cente········
参数1：显示的图片的需要从哪个位置开始，将图片由上至下分为三个部分，top,center,bottom
参数2：你的图片需要展示的位置，分为 left,center,right.将标签的body分为三个部分
9.设置链表的图标

<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>

10。合并表格的边框

<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>

11，边框（给每个边框设置不同的颜色）

<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>

注意：这个边框的简写属性是：border-width,border-style,border-color,这个简写属性，一定要掌握。
12，盒子模型（重点掌握）

<!--
css中的盒子模型:我们将我们页面上的每一个标签全部看成一个盒子(宽,高,内边距(盒子内部的东西和盒子内部的间距),外边距(盒子与盒子之间的距离),盒子的厚度)

width:盒子的宽度
height:盒子的高度
border-width:盒子的厚度
padding:设置盒子的内边距
margin:设置盒子的外边距


-->
<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>

注意：盒子模型我们在使用的时候，重点要掌握每个参数所代表的意义
13.CSS的定位

<!--
css定位:
1.相对定位(relativ):相对于自己之前的位置

2.绝对定位(absobute):相对于自己的父标签

3.固定定位:相对于自己的浏览器而言的

-->
<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>