走进前端——CSS

Posted 2022-02-01 迷途の羊

前言

作者:迷途の羊 
在这里分享学习自己的经历,希望可以帮助到初学前端的旁友
成为一个更好的前端开发者
大学在读前端菜鸡  若文中有误，感谢指正

DAY3 CSS选择器、样式定义

CSS是什么？

前端开发必然少不了CSS，CSS简单来说他是一种层叠样式表，用于给html元素添加各种各样的样式从而使页面展示出更好的效果同时带给用户更佳的体验。

CSS使用方法

CSS有三种引入方法，每种引入方法的优先级不同，因此，在页面中同时使用不同的引入方式时要注意其优先级，以免导致页面中展现不出自己想要的样式(优先级：某DOM节点同时具有两种相同类型的样式时就会计算其优先级，只显示优先级最高的那个样式)。

• 行内样式
  行内样式就是直接在标签内部定义样式，该定义样式的方法优先级最高。

下面的例子我们安放了一个P标签，并给P标签修改了字体大小以及字体颜色：

    <!--行内样式-->
    <p style="font-size: 18px;color: rgba(182, 182, 92, 0.5);">行内样式</p>

在这个标签中，style="“是用来定义样式的，在”"中书写CSS且每条语句之间用分号隔开(CSS语法)。

• 内联样式
  内联样式是我们更加常用的写法，它写入的地点是head标签中的style标签内部，是由选择器+大括号来实现的，接下来我们实现一个简单的语义化按钮来巩固之前的HTML语义化：

<!--语义化按钮,HTML-->
    <a href="javascript:;">
        <p>button</p>
    </a>

	<style>
       /*语义化按钮,CSS*/
       a
            text-decoration: none;
            color: black;
        

        p
            border: 1px solid #ccc;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            box-shadow: 3px 3px 10px rgb(204, 204, 255);
        

        p:hover
            background-color: #eee;
            box-shadow: 3px 3px 10px rgb(180, 180, 255);
        
	</style>

最终展现效果如图：
我们给该按钮也设置了一个CSS鼠标覆盖样式，当鼠标放入按钮内按钮样式效果也会改变，如图所示：

简单介绍一下使用的CSS语句，后续文章中会详细介绍：

text-decoration：清除a标签下划线样式；color：更变字体颜色；border：给块级元素设置边框；
width：设置块级元素宽；height：设置块级元素搞；line-height：设置行高；text-align：设置内容居中方式；
border-radius：设置边框弧度；box-shadow：设置盒子的阴影；

• 外部样式
  外部样式是用于引入其他css文件中的CSS样式的，使用方法如下，CSS书写方式与内联样式相同，但不需要写style标签。

		<!--写在head中-->
		<link rel="stylesheet" href="./tips.css">

href=""为CSS文件路径。

CSS选择器

• “ * ”通配选择器
  通配符选择器，写在该选择器内部的样式对所有元素均生效，通常用于初始化元素样式，最常见的初始化如下所示：

	<style>
        *
        margin:0px;
        padding:0px;
        
    </style>

该部分将所有元素的外边距及内边距初始化为0px。该选择器的优先级最低，为0；

• 元素选择器
  元素选择器也可以成为标签选择器，它们是由标签来开头的，譬如：

	<style>
        a
            text-decoration: none;
            color: black;
        

        p
            border: 1px solid #ccc;
        
    </style>

其中的p、a均为元素选择器，其优先级也较低，为1。

• class类选择器
  类选择器是我们很常用的，匹配方式是匹配HTML标签中所有class为某一值的所有元素，这些元素的样式均会受到class类选择器样式中的影响，譬如：

HTML：

	<a class="button-outer" href="javascript:;">
        <p class="button-inner">button</p>
    </a>

CSS：

	<style>
        .button-outer
            text-decoration: none;
            color: black;
        

        .button-inner
            border: 1px solid #ccc;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 15px;
            box-shadow: 3px 3px 10px rgb(204, 204, 255);
        

        .button-inner:hover
            background-color: #eee;
            box-shadow: 3px 3px 10px rgb(180, 180, 255);
        
    </style>

此处代码效果与之前的button按钮效果相同，注意，写class样式时要在class前加"."。该选择器的优先级为10。

• id选择器
  id选择器和class选择器类似，class前加"."改为#即可，同样在HTML中标签赋予id属性即可，该选择器不常用，其他使用方法和class类似，在这里不做过多展示，该选择器优先级为100。
• 后代选择器
  先给出一个例子：

       .div a
           font-size: 20px;
       

此处选择器意义为：被类名为div的标签包裹的所有a标签的样式更改为…
这样书写的方式即为后代选择器，意为选择某一元素的所有后代。

• 子元素选择器
  子元素选择器和后代选择器类似，但作用范围比后代选择器小，先抛出一个示例：

.div>a
           font-size: 24px;
       

作用效果和后代选择器相同，但子元素选择器不可跨层作用。

• 相邻选择器
  选择对应的同级元素的下一个兄弟且必须相邻，示例：

.div+div
           font-size: 24px;
       

<div class="div">
        <a href="">1</a>
        <br/>
        <a href="">2</a>
        <a href=""><p>3</p></a>
    </div>
    <div>4</div>

此处选中class名为div的元素的相邻兄弟div(HTML内容为4的元素)会更改字体大小。PS：中间不可间隔元素。

• 伪类/伪元素选择器
  在此介绍常用的选择器

选择器	解释
:hover	当鼠标覆盖后所显示的样式
:before	在该元素之前插入一些内容/样式
:after	在该元素之后插入一些内容/样式
:link	a标签未被访问时的样式
:visited	a标签已访问时的样式
:hover	a标签在鼠标悬浮时的样式
:active	a标签被长按时的样式

注意：hover必须在link和visited之后才会生效，active必须在hover之后才会生效。

CSS样式

在这里先介绍部分简单的样式，其他样式后续讲解：

样式	解释
color	内容字体颜色
background-color	设置背景颜色
font-size	字体大小
border	设置块级元素边框(粗细大小，边框类型，边框颜色)
font-family	设置字体样式(宋体…)
line-height	设置内容行高(通常用于给单行文本进行行垂直居中)
text-align	设置内容对齐方式(左对齐:left，右对齐:right，水平居中:center)

下期内容

CSS定位(暂定)

**章末语**
前端容易入门，但是需要持续不断的学习，更新自己的知识
千里之行，始于足下
喜欢文章的话可以动动小手点个赞和关注呀~~
长期更新......