CSS入门（一）

最新推荐文章于 2024-07-19 17:37:28 发布

Veer_c

最新推荐文章于 2024-07-19 17:37:28 发布

阅读量6.8k

点赞数 5

文章标签： java css html js web

本文链接：https://blog.csdn.net/Veer_c/article/details/103882856

版权

CSS入门（二）：
https://blog.csdn.net/Veer_c/article/details/103883102

CSS入门

CSS：层叠样式表(英文全称：Cascading Style Sheets）

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>

css的使用方式

行内样式
注意：
使用标签的style属性进行css控制，css写在style属性值中
弊端：只能控制一个标签的样式
超链接

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

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

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

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

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

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>

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

伪类选择器：

<!--
伪类选择器:可以控制标签在不同的状态下展示出的不同的样式
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>

CSS入门（二）：
https://blog.csdn.net/Veer_c/article/details/103883102

Veer_c

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门（一）

CSS入门HTML：负责网页的结构，CSS：负责网页的美观（样式）可以用来设置网页的样式：<style type="text/css"> a{ font-size:18px; color:#F00;}</style></head><body><a href="">超链接</a&...
复制链接

扫一扫