前端全栈学习笔记第三天 - CSS

最新推荐文章于 2024-04-30 23:00:09 发布

推开世界的门

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量199

点赞数 1

分类专栏：前端学习笔记文章标签：学习笔记

本文链接：https://blog.csdn.net/qq_38845858/article/details/86032140

版权

前端学习笔记专栏收录该内容

45 篇文章 5 订阅

订阅专栏

之前很杂的把前端几乎学了一遍，从html,css，h5,c3,js，jq，ajax，php，vue，微信小程序，微信小游戏，three.js,node，mongodb现在再系统的学一遍，为明年实习打下扎实的基础，简单的就不再赘述。先看一下第三天的学习路线

第三天的第一个重头戏是css选择器，其次是字体样式，文本样式还有一个小的导航栏案例

一：css选择器

css选择器里面分为基本选择器，符合选择器

先看基本选择器

标签选择器例如：div input p

类选择器： .定义 class调用

id选择器：#定义，id调用

通配符选择器：* 所有标签都会选择，但是权重最低，不建议使用

这里着重强调一下id 和class

id好比身份证号，class好比姓名。所以在一个demo中，可以有多个相同的class名，但是不能有相同的id名

但是id和class可以共存在同一个标签，就好像人既有身份证，又有姓名

复合选择器

后代选择器：nav a 用空格隔开，表示子孙后代

子代选择器：nav > a 用> 隔开代表最近的儿子，亲儿子

交集选择器：既满足，又满足 .div.p

并集选择器input,div,#nav 集体申明，用于相同的样式

二：字体样式

字体大小： font-size

字体样式 : font-style

设置字体 : font-family

字体加粗 :font-weight

特别提示：

1：font-size别忘记加单位

2：font-weight如果用400或者700，不用加单位，一旦加单位，没效果

3：综合连写：有顺序关系，必须有font-size 和font-family

三：文本样式

颜色： color

行高：line-height

对齐：text-aline

缩进：indent

特别提示：

段落缩进两个字，就是通过text-indent实现的，1em代表一个字

四：文本格式化标签

五：导航栏小案例

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style>
    .nav{
    	text-align:center;
    }
    	a{
    		width: 180px;
    		height: 50px;
    		text-decoration: none;
    		line-height: 50px;
    		background: blue;
    		color: white;
    		display: inline-block;
    		border-radius: 10px;
    	}
    	a:hover{
    		color: black;
    	}

    </style>
</head>

<body>
    <div class="nav">
    	<a href="#">导航栏</a>
    	<a href="#">导航栏</a>
    	<a href="#">导航栏</a>
    	<a href="#">导航栏</a>
    </div>
</body>

</html>

效果图