CSS基础及用法

最新推荐文章于 2022-06-04 12:32:44 发布

二与三

最新推荐文章于 2022-06-04 12:32:44 发布

阅读量292

点赞数 1

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/qq_40548854/article/details/107573806

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

对于一个网页来说，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>

效果：
鼠标选中了“的使用”

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

效果：
在这里插入图片描述

优先级比较方式：

(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的规则还有很多很多…，本人目前水平有限，见谅。

二与三

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录