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

忘是亡心i 2021-09-17 14:36 522阅读 0赞

之前很杂的把[前端][Link 1]几乎学了一遍，从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可以共存在同一个标签，就好像人既有身份证，又有姓名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

复合选择器

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

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

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

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

二：字体样式

字体大小 ： font-size

字体样式 : font-style

设置字体 : font-family

字体加粗 :font-weight

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

特别提示：

1：font-size别忘记加单位

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

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

三：文本样式

颜色 ： color

行高：line-height

对齐：text-aline

缩进：indent

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

特别提示：

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

四：文本格式化标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

五：导航栏小案例

代码：

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

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4][]

[Link 1]: https://www.baidu.com/s?wd=%E5%89%8D%E7%AB%AF&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/ef67339b18dd4e1996b2ae47c60b5082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/bab808f071664af6980046928de58503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/4397b27e74414652a55e64e5a7998c64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/ad0fd862bee641de8a93784dcbdb239b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 4]: /images/20210812/237875587d60458c9c64d122993a67a0.png