CSS入门(一)

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

  • 5
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值