前端CSS基础

2025-01-02 技术教程

1、css简介
　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2、导入css
导入css有3种方式：
1.元素内嵌
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><p>前端CSS基础</p></body></html>

效果：

2.页面嵌入
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><style>.css_test{background-color:darkorchid;}</style></head><body><div><pclass="css_test">前端之CSS学习</p></div></body></html>

效果：

3.外部引用
也是将一个.css文件引入到HTML文件中

#css定义，文件名称color.css.page_color{/*设置背景颜色及宽带*/background-color:darkorchid;width:300px;}<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><linkrel="stylesheet"href="color.css"></head><body><div><pclass=page_color>前端CSS基础</p></div></body></html>

效果：

注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，
闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，
因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。此外行内的样式等级最高
4.优先级
标签>页面嵌入>外部引用
3、css选择器(常用)

标签选择器：div{background-color:red;}<div></div>class选择器：.bd{background-color:red;}<divclass='bd'></div>id选择器：#idselect{background-color:red;}<divid='idselect'></div>关联选择器：#idselectp{background-color:red;}<divid='idselect'><p></p></div>组合选择器：input,div,p{background-color:red;}属性选择器：input[type='text']{width:100px;height:200px;}.c1[xiao='a']{color:red;}<br><divclass='c1'xiao='a'>自定义属性选择器</div><br>伪元素选择器：a:link{background-color:red;}#鼠标没有碰过的样式a:hover{background-color:red;}#鼠标放上去的样式a:active{background-color:red;}#选择链接时的样式a:visited{background-color:red;}#已经访问过的链接的样式

案例：

CSS选择器案例

1.id应用

"#",这个调用CSS样式的方法，就是在头部<style>#name{....}</style> # name意思就是所有id为name的都会使用这个css样式

<head><metacharset="UTF-8"><title>前端CSS</title><style>#name{background-color:red;}</style></head><body><div><pid="name">前端CSS</p><pid="name">前端HTML</p></div></body>

效果：

ID选择器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><style>/*ID选择器*/#i1{background-color:red;}</style></head><body>/*为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同*/<aid="i1">id选择器</a><aid="i1">id选择器</a><aid="i2">如果ID不同,那么将不会应用样式</a></body></html>

效果：

2.标签应用

为指定标签统一设置格式：在头部<style>p{....}</style> 这里的p是标签的名称，也可以是div这样就会给所有的div设置格式

<head><metacharset="UTF-8"><title>前端CSS</title><style>p{background-color:lightskyblue;width:100px;height:20px;}</style></head><body><div><p>前端CSS</p><p>前端HTML</p></div></body>

效果：

标签选择器

为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><style>/*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/div{font-size:19px;}</style></head><body><div>fontsizetest19</div></body></html>

效果：

3.类选择器

class选择器，id是可以相同的，代码如下：

<head><metacharset="UTF-8"><title>前端CSS</title><style>/*类选择器标签*/.cls{background-color:blue;font-size:15px;}</style></head><body><divclass="cls">classtestdiv</div><aclass="cls">classtesta</a><spanclass="cls">classtestspan</span></body>

效果：

注：以上三种选择器，建议使用第三种

4.关联选择器

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CSS学习</title><style>/*为一个标签应用了,类选择器,下的li标签设置样式*/.containerli{background-color:pink;}</style></head><body><divclass="container"><div>test</div><ul><li>li1</li><li>li2</li><li>li3</li></ul></div></body></html>

效果图：

关联选择器应用场景：为某标签下面的标签设置指定的样式：

#下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式.containerli{background-color:pink;}#问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！.containerlia{background-color:pink;}

案例：

<!DOCTYPEhtml><htmllang="en"><head><style>/*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/.container.l.p{background-color:pink;}</style></head><body><divclass="container"><divclass="l">test<div><ul><liclass="p">helloshuaige</li></ul></div></div></div></body></html>

效果图：

5.组合选择器

有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？

.container.a.cc1{background-color:pink;}.container.a.cc2{background-color:pink;}

解决方法代码如下：

.container.a.cc1,.container.a.cc2{background-color:pink;}

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

.container.a.cc1,.cc2{background-color:pink;}

这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：

/*组合选择器*/.containerb,.a.cc1,.cc2{background-color:pink;}/*组合选择器分解,上面的分解完成之后谁来应用:background-color:pink;这个样式呢?*/.containerb.containerb.a.cc1.containerb.cc2　......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法

6.属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码：

我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性

怎么做呢？在组合选择器后面加个[type=“text”]即可

<!DOCTYPEhtml><htmllang="en"><head><style>/*input和[之间不能有空格]*/.coninput[type="text"]{border:3pxsolidred;}</style></head><body><div><inputtype="text"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div></body></html>

效果图：

需求又来了，我想找到input标签为type为text并且name为“lianxi”的那个input标签

<divclass="con"><inputtype="text"/><inputtype="text"name="lianxi"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div>

解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：

效果：

属性标签经常用，要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>shuaige</title><style>/*input和[之间不能有空格]*/.coninput[type="text"][alex="shuaige"]{border:3pxsolidred;}</style></head><body><divclass="con"><inputtype="text"/><inputtype="text"alex="shuaige"/><inputtype="password"/><inputtype="file"/><inputtype="checkbox"/><inputtype="button"/><inputtype="reset"/></div></body></html>

更多选择器
4、css常用的属性　
1.颜色属性：

color：greencolor：#ff6600color：#f60color：rgb(255,255,255)#红(R)、绿(G)、蓝(B)每个的取值范围0~255color：rgba(255,255,255,1)#RGBA是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的(色彩空间)透明度

2.字体属性：　　

font-size:14px/50%/largerfont-family:微软雅黑,seriffont-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)100、200、300~900,400=normal，而700=bold

简写方式:<br> font: 20px '微软雅黑'
3.背景属性：　　

background-p_w_picpath:url(图片路径)background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)background-position:righttop(20px20px);(横向：leftcenterright)(纵向：topcenterbottom)简写方式:background:背景颜色url(图像)重复位置background:#f60url(p_w_picpaths/bg,jpg)no-repeattopcenter

代码：

<head><metacharset="UTF-8"><title>前端CSS</title></head><body><div>Hello,html</div><div></div></body>

div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：

效果：

4.文本属性：　　

text-align:center;#横向排列line-height:200px;#文本行高通俗的讲，文字高度加上文字上下的空白区域的高度50%:基于字体大小的百分比text-indent:150px;#首行缩进，letter-spacing:10px;#字符间距word-spacing:20px;#单词间距

5.边框属性：

border-style:none#无边框solid#直线边框dashed#虚线边框dotted#点状边框double#双线边框inherit#继承groove#凸槽边框ridge#垄状边框、insetinset边框、outsetoutset边框依赖于border-color属性border-width：px固定值的边框medium中等边框thick粗边框thin细边框inherit继承border-color：red#ff0000rgb(255,255,0)rgba(255,255,0,0.1)<br>border-radius:px倒角简写方式：border：2px#f60solid

代码：

<div></div><div></div><div></div>#边框可以单独的设置一边的边框、上、下、左、右<div>前端CSS</div>

6.列表属性：

list-style-type:none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01,02,03,等。)lower-roman小写罗马数字(i,ii,iii,iv,v,等。)upper-roman大写罗马数字(I,II,III,IV,V,等。)lower-alpha小写英文字母Themarkerislower-alpha(a,b,c,d,e,等。)upper-alpha大写英文字母Themarkerisupper-alpha(A,B,C,D,E,等。)lower-greek小写希腊字母(alpha,beta,gamma,等。)lower-latin小写拉丁字母(a,b,c,d,e,等。)upper-latin大写拉丁字母(A,B,C,D,E,等。)hebrew传统的希伯来编号方式armenian传统的亚美尼亚编号方式georgian传统的乔治亚编号方式(an,ban,gan,等。)cjk-ideographic简单的表意数字hiragana标记是：a,i,u,e,o,ka,ki,等。（日文片假名）katakana标记是：A,I,U,E,O,KA,KI,等。（日文片假名）hiragana-iroha标记是：i,ro,ha,ni,ho,he,to,等。（日文片假名）katakana-iroha标记是：I,RO,HA,NI,HO,HE,TO,等。（日文片假名）list-style-position:inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。outside默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inherit规定应该从父元素继承list-style-position属性的值。list-style-p_w_picpath:URL图像的路径。none默认。无图形被显示。inherit规定应该从父元素继承list-style-p_w_picpath属性的值。简写方式:list-style:squareinsideurl('/i/arrow.jpg');

7.dispaly属性：　　

display:none#隐藏属性block#变块级元素inline#变内联元素inline-block#内联元素默认不能设置长宽，块级可以，这个让内联元素可以设置heightwidth

代码：

<div>前端CSS</div><div>前端JavaScript</div><a>前端HTML</a>

效果：

8.cursor属性：

鼠标停放时显示的效果

cursor:pointer#鼠标变小手helpmove

代码：

<div>停放在这里显示小手(pointer)</div><div>停放在这里显示问号(help)</div><div>停放在这里显示转圈(wait)</div><div>停放在这里显示移动(move)</div><div>停放在这里显示定位(crosshair)</div>

9.opacity属性：

opacity：0.4#0-1之间的小数，颜色透明度

10.z-index属性：　　

z-index：10#设置优先级，一般用在模态对话框

11.margin,pading边距属性：

margin:10px#外边距(本身不会增加)，与边框的距离padding:10px#内边距(本身会增加)遵循上右下左，元素之间的距离

12.float属性　　

float:left/rightclear:both<body><div><div>a</div><div>b</div><div></div></div></body>

代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>前端CSS</title><style>.float-left{width:20%;background-color:red;height:500px;float:left;/*这里长和宽，可以用百分比或者直接指定像素来指定*/}.float-right{width:80%;background-color:blue;height:500px;float:left;/*这里长和宽，可以用百分比或者直接指定像素来指定*/}</style></head><body><divclass="float-left"></div><divclass="float-right"></div></body></html>

效果：

注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：

13.position属性

position:fixed#固定浏览器窗口，网页返回顶部的按钮absolute#固定窗口relative#一般用于和absolute配合使用，相对于absolute<div><div>111111</div></div><div><div><div>111</div></div></div>

模态对话框

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>模态对话框</title><style>.hide{display:none;}.modal{width:400px;height:300px;background-color:#dddddd;position:fixed;top:50%;left:50%;margin-top:-150px;margin-left:-200px;z-index:10;}.shadow{position:fixed;top:0px;left:0px;right:0px;bottom:0px;/*background-color:black;*//*opacity:0.6;*/background-color:rgba(0,0,0,.6);z-index:9;}</style></head><body><inputtype="button"value="添加"/><divclass="shadow"></div><divclass="modal"><inputtype="text"/><inputtype="text"/><inputtype="text"/><inputtype="text"/></div><div></div></body></html>

注意：
1、css文档从上到下执行，以最后一个为准

a{font-size:10px;}b{font-size:40px;}<pclass="ab">ddd</p>

2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h2,h3,h4,h5,h6,h7,p,dt 切记
3、父div里面的子div都float,
　　方法1、在最后加一个div然后添上属性 clear：both
　　方法2、定义一个通用属性，

clearfix:afte{content:'111';display:block;clear:both;/*visibility隐藏内容但占高度*/visibility:hidden;height:0;/*display:none;隐藏内容也不占高度*/}

一些案例：

带图像input

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>带图像的登录</title><style>.icon-name{background-p_w_picpath:url(i_name.jpg);height:16px;width:200px;display:inline-block;background-repeat:no-repeat;}</style></head><body><div><inputtype="text"/><spanclass="icon-name"></span></div></body></html>

伪类选择器运用清除浮动

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>伪类选择器运用清除浮动</title><style>.c1:after{content:'aaa';}.c2:before{content:'666';}.clearfix:after{content:'.';clear:both;display:block;visibility:hidden;height:0;}.left{float:left;}</style></head><body><divclass="c1">ddd</div><divclass="c2">888</div><divclass="clearfix"><divclass="left">1</div><divclass="left">2</div></div></body></html>

小尖角

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>小尖角</title><style>.icon{display:inline-block;border-top:15pxsolidred;/*border-right:15pxsolidgreen;*//*border-bottom:15pxsolidyellow;*//*border-left:15pxsolidpink;*/border-right:15pxsolidtransparent;border-bottom:15pxsolidtransparent;border-left:15pxsolidtransparent;}</style></head><body><divclass="icon"></div></body></html>

后台布局一

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>后台布局一</title><style>*{margin:0;}.pg-header{height:48px;background-color:#2459a2;}.pg-body.body-menu{position:absolute;top:48px;left:0;bottom:0;width:200px;background:red;}.pg-body.body-content{position:absolute;top:48px;left:210px;/*bottom:0;*/right:0;background:green;}</style></head><body><divclass="pg-header"></div><divclass="pg-body"><divclass="body-menu"></div><divclass="body-content">asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/></div></div><divclass="pg-heaher"></div></body></html>

后台布局二

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>后台布局二</title><style>*{margin:0;}.pg-header{height:48px;background-color:#2459a2;}.pg-body.body-menu{position:absolute;top:48px;left:0;bottom:0;width:200px;background:red;}.pg-body.body-content{position:absolute;top:48px;left:210px;bottom:0;right:0;background:green;overflow:auto;}</style></head><body><divclass="pg-header"></div><divclass="pg-body"><divclass="body-menu"></div><divclass="body-content">asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/></div></div><divclass="pg-heaher"></div></body></html>