前端学习日志0910

认识css

1.css的三种引入方式(推荐使用外联式,把结构与样式分离)

内嵌式css:<div style="width: 200px; height: 200px; background-color: red;"></div>

在标签中添加style属性,里面可以写相关的样式。

内联式css:在html表格中添加style标签,利用选择器在标签中设置css样式。

外联式:通过link标签引入一个外部css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="mycss.css">

<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
    }
</style>
<body>
    <div style="width: 200px; height: 200px; background-color: red;"></div>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

 2.css选择器

1、标签选择器(如:body,div,p,ul,li)。ele{}

2、.类选择器  有相同类名的标签都会应用此样式。(如:class=“head”,class=“head_logo”) 。.head{}

3、ID选择器(如:id=“name”,id=“name_txt”)。#{}

4、全局选择器(如:*号)。*{}

5、.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)。.classname1 .classname2{}

6、.继承选择器(如:div p,注意两选择器用空格键分开)。dip p {}

7、伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)。a:hover{}

8、字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含) 

2.利用css设置文本和字体样式

内容较多,参考菜鸟教程:

CSS Text(文本) | 菜鸟教程 (runoob.com)

CSS Fonts(字体) | 菜鸟教程 (runoob.com)

或者MND手册:

font - CSS(层叠样式表) | MDN (mozilla.org)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值