CSS基础及用法

程序员文章站 2022-07-02 08:59:06

前言对于一个网页来说，css是网页的门面，对于一个前端初学者来说，css更是他们必经之路，通过这篇文章我就来带大家好好认识一下css吧！目录List item正文1.定义这里写自定义目录标题前言目录正文1.定义欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式...

前言

对于一个网页来说，css是网页的门面，对于一个前端初学者来说，css更是他们必经之路，通过这篇文章我就来带大家好好认识一下css吧！

拓展

在学习css之前，我们首先要清楚页面元素。

1).页面元素分类：

(1).块元素(用于搭建页面结构)

特点：默认宽100%父，高包裹内容，独占一行。
例如：div(无意义的块元素，不知道使用哪个块元素的时候使用)
html、body、head、h1~h6、p、ul(无序，…)、ol(有序，123) 、li、dl>dt(dl为自定义列表，
dt为标题，dd为列表项(看起来是这样…,其实两者没有区别，可以通过css
把dd的内边距去掉即与dt相同))、dl>dd、H5新增的语义化标签(与div相比，
div没有语义，而语义化标签能方便阅读理解)：content、header、article…

(2).行内元素(用于内容填充)

特点：不能通过css为其指定宽高。宽高由自身来决定。与其他行内元素共享一行空间。
例如: span、a(超链接 href 相对地址当前目录: . 上级目录：…)、H5过期的语义化标签(依旧能
使用)：i(斜体样式)、em(强调)、strong(加粗)、video、audio、img

(3).功能元素(不能搭建网页)

table：表格，用于展现列表数据，层次结构，自动换行。
form：收集用户数据，与后端交互
iframe:将一个页面嵌入当前页面中。

正文

1.定义

css又称作重叠样式表，它主要用于对网页中的元素进行精准控制及修改，实现对网页内对象的编辑和处理。

2.语法

(1).引入

1).将css规则直接写在style中 (耦合性太高，不好，现在多追求高内聚，低耦合)

<div style="background-color: blue;"></div> <!--直接写在标签中,效果为块元素的背景色为蓝色-->

2).将样式嵌入到style标签中 (样式和html还是没有分开，当样式过多，就会复杂起来)

<head>
 <style>
 	div{
            background-color: blue;
        }
 </style>
 </head>
 
 <body>
    <div>--将css规则直接写在style中,效果为所有div元素的背景色为蓝色--</div>
 </body>

3).将样式写在.css文件中，再通过link引入
link.css文件：

div{
    background-color: blue;
}

html文件:

<link rel="stylesheet" href="link.css">   <!--外链引入-->

(2).语法组成

选择器：
{
属性:值;
…
属性:值;
}

(3).选择器

1).核心选择器

类选择器：.类名{}
注：不同的html元素class值可以重复，即一个类选择器可以被重复使用

<head>
<style>
.uls
        {
            
            background-color: burlywood;
        }
</style>
</head>
<body>
<p class="uls"></p>        
<div class="uls"></div>
</body>

标签选择器(元素选择器)：标签名{}
注：所有的该标签都会被选择，范围太大，不具体. 如div{}、p{}等等

<head>
<style>
div
        {
            
            background-color: burlywood;
        }
</style>
</head>
<body>
<div>1</div>      
<div>2</div>
</body>

id选择器(优先级高于类选择器)：#id{}
注：一个id选择器只能被使用一次

<head>
<style>
#box
        {
            
            background-color: burlywood;
        }
</style>
</head>
<body>
<div id="box">1</div>      
</body>

组合选择器:div,p{}
注：所有的div标签和p标签都被选择了

<head>
<style>
div,p
        {
            
            background-color: burlywood;
        }
</style>
</head>
<body>
<p>1</p>      
<div>2</div>
<p>3</p>
</body>

并且选择器：div.box{}
注：标签为div且class为box

<head>
<style>
div.box
        {
            
            background-color: burlywood;
        }
</style>
</head>
<body>
<div class="box">1</div>      
<div>2</div>
</body>

普遍选择器： *{}
注：页面中所有的标签都选上

补充：关于css的命名规则，大家可以去下面的链接学习
命名规则

2).层次选择器

父子选择器：用于找到子元素,满足条件的子元素都会被选择，并不是找到第一个以后就停止不找了。

格式：父 > 子
例：ul>li{} 、 .var>li{} 、 .var>#ls{} .var> *{}

后代选择器：用于找到后代元素,父子选择器里面只找到儿子就行了，后代选择器则是满足条件的儿子的儿子…的儿子也会找到
格式：父后代 //中间是空格
例：ul li{} //多重嵌套的li也能找到

<ul>
        <li class="first">
            <ul>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li class="second">
        </li>
    </ul>
    
    <!-- 对于父子选择器 ul>li： 他只能找到类名为first和second的li
         而对于后代选择器ul li，他还能找到类名为first的li下面的所有li-->

下一个兄弟选择器(直接兄弟选择器)：兄弟就是跟他有同一父元素的元素

格式：p + *{} //不管p后面是什么都会选择
p + a{} //如果下一个是a标签，会选择，否则不会选择
注：只会看他的下一个兄弟，不管他是否满足条件都不会继续向后寻找

之后所有兄弟选择器
p ~ *{} //选择p后面所有的兄弟

3).伪类选择器

含义：过滤器，在已经选择到的元素上再进一步筛选
格式(列举的为常用的)：
1.锚伪类选择器
元素：状态{} //当元素的状态改变为设置的状态时，进行{}里面的操作。

   a:link {color:blue;} //未访问时该链接的字体颜色为blue
   a:active{color:#99999;}//鼠标点击时该链接的字体颜色为#999999
   a:hover{color:#666666;}//鼠标停留在该链接时的字体颜色为#666666
   a:visited{color:#333333;}//该链接被访问时的字体颜色为#333333

2.nth选择器

     ul > li:first-child {} //选择ul下的第一个li
     ul> li:nth-child(3) {} //选择第三个li
    ul> li:nth-child(2n+1) {} //n从0开始每次加1，有几个li则n最大为几。 如果有四个li,则会选择第1，3个li

4).伪元素选择器【过滤器】

格式：元素::位置{}
例：
div::first-letter{} //选中元素的第一个字;
div::first-line{} //选中元素第一行；
div::selection{} //选中被选择的文本元素
div::before{content:“hello”} //在元素的首位添加内容 hello
div::after{content:“world”} //在元素内的末尾添加内容,常用于在内部元素浮动后导致块元素高度为0的问题，这个会在后面讲到。

<head>
    <style>
        div.box::first-letter{
            font-size: 20px;
            color: blue;
        } 
        div.box::first-line{
            font-size: 20px;
        } 
        div.box::selection{
            color: red;
        } 
        div::before{
            content:"hello"
        } 
        div::after{
            content:"world"
        }
    </style>
</head>
<body>
    <div class="box">伪元素的使用</div>
</body>

效果：
鼠标选中了“的使用”
CSS基础及用法

5).属性选择器【过滤器】（主要用于表单）

        ul>li[class = ls]{} //选择ul下的li中类为ls的li元素 
	           name*=e,包含e 
	           name^=e 以e开头
	           name$=e，以e结尾 
        等等很多种筛选方式。

3.选择器的优先级

解释：有时候，我们写了几个不同的选择器，但是他们都对同一标签的一个属性进行了赋值，这时就涉及到了优先级的问题，谁的优先级大听谁的。

例如：

<head>
    <style>
        div.box{
            color: blue;
        }
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">优先级</div>
</body

效果：
CSS基础及用法

优先级比较方式：

(1) 特权

!important //例如： color: #333 !important ;
注：当一个属性被赋予特权后，相当于优先级达到最高

(2) 权值

style属性(直接写在标签里的) 1000
#id 100
class、伪类选择器 10
标签选择器 1

在上面的例子中，div.box选择器的优先级：1+10=11，div选择器的优先级：1，所以color的属性值有div.box选择器决定

注：如果一样大，则后者覆盖前者

4.单位

1).绝对单位

px

2.)相对单位

em， em是相对于当前元素的字体大小 .3em 表示 0.3个em
rem，rem相对于html元素的字体大小

<head>
    <style>
        html{
            font-size: 20px;
        }
        div{
            color: #ffffff;
            background-color: crimson;
            margin-bottom: 1px;
            padding: 1em;  /* 内边距的距离为1字体大小 box1为10px box2为20px,box3为10px */
        }
        .box1{
            font-size: 10px;
        }
        .box2{
            font-size: 20px;
        }
        .box3{
            font-size: 10px;
            /* .box3优先级大于div选择器，内边距改为 html中的1字体单位 20px */
            padding: 1rem;   
        }
    </style>
</head>
<body>
    <div class="box1">hello</div>
    <div class="box2">hello</div>
    <div class="box3">hello</div>
</body>

5.用法规则

针对于块元素内部的元素，具有可继承性，即给块元素施加规则以后，他的后代元素都能继承这个规则

1).文本规则

用途：

1).居中

text-align:conter; //使块元素的内容居中
vertical-align:middle（垂直居中）; //调整行内元素或者表格单元格的垂直对齐方式
line-align:xpx  //通过指定行高使得内容垂直居中

2).修饰文本

overflow:hidden; //隐藏溢出的内容
visible(默认) ; //显示溢出的内容
scroll; //溢出的内容通过滚动条可以访问
overflow-x、overflow-y:分别在x和y轴上   隐藏内容
text-decoration: //文本装饰         none 文本装饰为空   
text-decoration-line://线的内容    line-through 将一条线覆盖在字体中间
text-decoration-style://线的类型  solid 实线
text-indent: xem //首段x个像素缩进
text-transform:  //大小写转换

<head>
    <style>
        span.span1{
            background-color: blanchedalmond;
        }

        /* overflow 对溢出的内容进行处理 */
        .overflow{
            width: 200px;
            height: 100px;
            border: 1px solid #333333;
            overflow: scroll;
        }
        .overflowson{
            width: 600px;
            height: 400px;
           
            background-color: crimson;
        }
    </style>
</head>
<body>
    <!-- 内容居中 -->
    <div style="text-align: center;">
    <span class="span1"> 123</span>
    </div>
    <!-- 文本垂直居中 -->
    
    <div  style="line-height: 53px; background-color: blue; ">
    <span>234</span>
    </div>
    <div class="overflow">
        <div class="overflowson">
            <span></span>
        </div>
    
    <!--文本装饰 -->
    <div>
    <a href="" style="text-decoration-line: line-through; ">文本装饰</a>
    </div>
</body>

2).字体规则

用途：对盒子内容进行修饰

font-family: //字体样式
font: font-size/line-height font-family;
 例: 12px/1.5 (字体为12px，行高为字体的1.5倍) , '微软雅黑'...;
font-weight(加粗):normal/bold;     //可以写数字(100-900)或者bold，一般用bold
font-style(是否斜体):normal/italic;
color：//字体颜色

速写形式：

font：normal normal 12px/1.5 "微软雅黑" //font-style、font-weight、font-size、line-height、font-family //前两个可以缺省，即不写

3).实体规则

&nbsp; //表示空格
&lt;   //表示<
&gt;   //表示>

4).背景规则

background(速写形式):url()  
background-color:
background-image:url();
                 linear-gradient(Green,Yellow); //渐变色
                 radial-gradient(Green,Yellow); //镜像
background-position(背景图片的位置)
background-repeat:norepeat(背景图片不重复)
background-size(指定背景图片的大小，为了不变形，一般等比例):auto(图片原来的大小)、contain
background-clip(裁切)：padding-box(边框的不要，从内容开始裁)
background-origin(铺的起点) border-box(从边框开始) content-box(从内容区开始铺)

5).动画、过渡、变形

1)动画：通过设置关键帧使得页面变化

<head>
    <style>
        html,body{
            padding: 0px;
            margin: 0px;
        }
        div.container{
            height: 1000px;
        }
        div.box{
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 50%; 
            position: absolute;

            /* 使用动画 */

            /* 指定使用的动画的名字 */
            animation-name: move;

            /* 运动的时间，可以是毫秒或秒 */
            animation-duration: 3s;

            /* 运动曲线 */
            animation-timing-function: linear;   /*匀速*/
            /* 运行按步数执行 */
            animation-timing-function: steps(4);

            /* 动画循环的方式 */
            animation-direction: alternate; /*来回运行*/
            
            /* 动画执行次数 */
            animation-iteration-count: 3;
            /* animation-iteration-count: infinite;  永远 */

            /* 动画运行完成后的状态 */
            animation-fill-mode: forwards;  /*最后一帧前的状态*/
            /* animation-fill-mode: backwards; 最后一帧后的状态 */
            
            /* 开始的延迟 */
            animation-delay: 1s;
        }
        .box:hover{
            /* 动画的状态 */
            animation-play-state: paused;
        }
        /* 定义关键帧 */
        @keyframes move {
            from{
                margin-left: 300px;
                
            }to{
                margin-left: 1000px;
                margin-top: 300px;
            }
        } 
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>

2)过渡(从一种状态到另一种状态)

    1.更加简单的动画，没有动画帧
    2.需要触发：如:hover   
        transition：all 2s delay timing（速写形式）  后两个可以省略

        /* 需要过渡的属性 */
        transition-property: all;
        /* 变化时长 */
        transition-duration: 2s;
        /* 变化方式 */
        transition-timing-function: linear;
        /* 延迟时间 */
        transition-delay：0s

3)变形（一般要与过渡或者动画一起使用，不然就是瞬间变化）

    transform-origin: 10px 20px //指定元素变形的点
    transform-scale(2) //放大的倍数（宽和高都放大两倍）
    transform-rotate(45deg) //旋转45°
    transform-skewX(45deg) //对X方向不变，沿着Y方向旋转45度，（即逆时针旋转45°）
    transform-translateX(200px) //沿着x轴平移200px

例：(过渡加变形)

<head>
    <style>
        div{
            margin: 0px;
            border: 5px solid #cccccc;
            border-radius: 50%; 
        }
        div.outer{
            margin-left: 500px;
            margin-top: 100px;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            
            /* 发生变化的属性 */
            transition-property: all;
            /* 变化时长 */
            transition-duration: 2s;
            /* 变化方式 */
            transition-timing-function: linear;   
        }
        div.outer>div.inter{
            box-sizing: border-box;
            height: 100%;
        }
        div.outer:hover{
            background-image: url(图片的地址);
            transform: rotate(360deg);
            padding: 40px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inter"></div>
    </div>
</body>

5).其他规则

display:inline-block; //变为行内块元素，有行和块的特点 即不独占一行且可以指定宽高
        bolck; //使该元素变为块元素
        inline;//使该元素变为行内元素       
opacity:.3//透明度 0-1

列表样式：list-style：none;
表格样式： border-collapse:collapse; //当td添加边框，加在table上，可以合并隔壁的边框

总结

关于css的规则还有很多很多…，本人目前水平有限，见谅。

本文地址：https://blog.csdn.net/qq_40548854/article/details/107573806