本文详细介绍了CSS的基础功能，包括装饰HTML样式、注释、内联、外联和行内样式的应用，以及样式的优先级、选择器（如标签选择器、属性选择器等）、基本样式（如字体、背景、文本等）和布局技巧。特别关注了响应式设计和阿里巴巴开发工具库的应用。
一篇文章了解css
基础功能
css功能：装饰html样式。
css的注释:/注释内容/
html中的标签默认自带布局，清除默认边距 ，使用(*{margin:0;padding:0;})
清除默认布局建议使用标签对默认边距进行清除：百度:reset.css
css的三种引入方式
1.行内样式（直接在标签内写css样式，格式：<标签 style="属性名:属性值;”>）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--行内样式(直接在标签内写css样式 style="属性名:属性值;")-->
<p style="background:red">这是一个段落</p>
</body>
</html>
2.内联样式（在html的标签中引入css样式）
优点：内容与表现形式进行分离，方便对样式进行统一管理
引用格式：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
p {
background: red;
}
</style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
3.外联样式（引入外部的css文件来更改html中的样式）
优点：对内联样式进行进一步的抽离，(方便多个页面共用同一个样式)，创建一个css文件，需要该样式的HTML直接引用样式即可。
引入格式:<link rel="stylesheet" href="">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" href="./1.css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>
/* 1.css */
/* 选择器{属性名:属性值;}*/
p{background:red;}
样式的选择
1.如果是通用样式，就选择外联样式。(样式被多个文件引用，选外联)
2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理。(样式过多，选外联)
3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式。(使用样式较少。)
4.除了上面的几种情况，通常使用的都是内联样式
总结一句话:通常使用内联,当样式被多个文件引用或者样式过多时,选外联,出现次数唯一,页面不重复使用行内样式.
样式的优先级
优先级最高的是
1.行内样式的优先级大于内联样式和外联样式。
2.内联和外联样式写法相同，那就遵循就近原则(在head标签中谁在后者，执行谁的标准。)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>样式的优先级</title>
<link rel="stylesheet" href="./2.css">
<style type="text/css">
p {
color: blue;
/* color: blue!important; */
}
</style>
</head>
<body>
<p style="color:red;">我是一个段落</p>
<p>我是另一个段落</p>
</body>
</html>
/* 1.css */
p{
color:pink;
}
3.作用在不同标签时，内部原则(作用在一个标签上的优先于作用于该标签的父元素上的css格式，不比权重)。当选择器作用在同一层(同一个)标签上时，比权重(标签：1/属性：10/类：10/id:100)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部原则</title>
<style type="text/css">
#id-d p {
/*3个中作用在一个标签上，权值11*/
color: yellow;
}
#id-d {
/*没作用在具体的p元素上，内部原则，不会优先显示。*/
color: red;
}
p {
/*作用在p元素上，权值为1*/
color: rgba(1, 255.0, 1);
}
</style>
</head>
<body>
<div id="id-d">
<p>这是一个段落</p>
</div>
</body>
</html>
选择器
基本选择器
1.标签选择器（根据标签的名字进行元素的选择。）
格式:标签名{属性名:属性值;}
一个属性设置以分号结尾。
权重:0，0，0，1
p{background-color:red;}
2.属性选择器(根据标签内的属性去选择元素.)
格式：标签名(可加可不加)[属性名]{}
权重:0，0，1，0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/*选择a标签属性target,设置字体颜色为blue*/
a[target] {
color: blue;
}
[target] {
color: blue;
}
/*选择属性target为_blank值的标签,字体颜色为yellow*/
[target=_blank] {
color: yellow;
}
/*选择属性lang开头为H的标签，字体颜色为red*/
[lang^=H] {
color: red;
}
/*选择属性lang结尾为！的标签,字体颜色设置为pink*/
[lang$= !] {
color: pink;
}
/*选择lang标签内容中包含l的标签*/
[lang*=l] {
color: gray;
}
</style>
</head>
<body>
<p>带有 target 属性的链接会得到黄色背景：</p>
<a href="#">我是黄色</a>
<br>
<a href="#" target="_blank">_blank</a>
<br>
<a href="#" target="_top">_top</a>
<p>title 属性中包含单词 "flower" 的图片会获得黄色边框。</p>
<img src="#" title="tulip flower" />
<br />
<img src="#" title="lupu bridge" />
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="zh">nihao!</p>
</body>
</html>
3.类选择器(根据类的名字对元素进行选择。)
类选择器可以有多个，一个class可以定义多个类名，中间用空格隔开。
格式:.类名{属性名:属性值;}
权值：0，0，1，0
.cl-p{background-color:red;}
/* 标签.类/id属性值{}:选择该类/id名的标签。 */
/*p.intro{}*/
4.id选择器(根据id值对元素进行选择。）
id值唯一,如果有多个id值，javascript操作会有一定的影响。
格式:#id值{属性名:属性值:}
权值：0，1，0，0
#id-p{background-color:blue;}
/* 标签.类/id属性值{}:选择该类/id名的标签。 */
/*p#intro{}*/
其他选择器
5.群选择器。
不同选择器(选择器可以使用标签/类/id选择器)之间使用逗号(,)想隔离。
#id-p,.cl-p,h2,p{background-color:red;}
6.后代选择器
前代选择器与后代选择器之间使用空格来表示。选择器是基础选择器。
/*选择前代是前面的所有子类标签*/
#id-d div p{background-color:red;}
/*选择父类是div的所有p标签*/
div > p{color:yellow;}
/*选择父标签(闭合标签)</标签>后的第一个元素，只会选择一个元素*/
div + p{color:pink;}
7.伪类选择器
/*a标签的4种状态*/
/* 1.鼠标未移入时。(如果你的浏览器以前访问过页面，可能会显示activited格式) */
a:link{color:red;
text-decoration:none;
}
/* 2.鼠标移入时 */
a:hover{
color:yellow;
text-decoration:underline;
}
/* 3.鼠标点击时 */
a:active{
color:green;
}
/* 4.回来看时/访问过后 */
a:visited{
color:gray;
}
/*前后加内容*/
p:after{content:"之后";}
p:before{content:"你好"}
/*选择段落是其父元素的第一个/最后一个p标签,会显示多个*/
p:first-child{color:red;}
p:last-child{color:blue;}
/*选择其父元素的第n个p标签,会显示多个*/
p:nth-child(n){color:yellow;}
/*例如*/
ul li:nth-child(2){
background-color:red;
}
/*选择某个元素是单数的元素.*/
p:nth-of-type(2n+1){
background-color:red;
}
8.通配符
*就是代表通配符,代表所有的标签,不建议使用。
*{
margin:0;
padding:0;
}
css基本样式
1.font字体基本样式
#id-p{
font-style:italic;/*设置字体是否是斜体，oblique也是斜体,inherit:继承父类元素的，normal:标准字体*/
font-variant:small-caps;/*小型大写字母*/
font-weight:bold;/*字体粗细bold[er]/lighter/normal*/
font-size:2em;/*元素的大小/尺寸,2em是父元素的2倍数,默认一个字体大约16px*/
line-height:54px;/*设置元素的行高*/
font-family:"宋体";/*设置元素的样式*/
/*也可写成*/
font:italic small-cas 700 2em/54px "宋体";
}
2.背景
.box{
/*背景颜色*/
background-color:red;
/*背景图片*/
background-image:url(./img/0.webp);
/*是否平铺，默认平铺,no-repeat:不平铺 repeat-x：沿x轴平铺 repeat-y:沿y轴平铺*/
background-repeat:no-repeat;
/*图片的位置 左右 上下*/
background-position: 20% 40%;
/*图片的大小 宽度 高度*/
background-size:1000px 1000px;
/* 上面的设置简写*/
background:red url("./img/0.webp") no-repeat 20% 20%/1000px 1000px;
}
/*固定图片*/
background-attachment:fixed;
/*css精灵图*/
/*通过background-position:属性可以设置显示图图片的问题,通过这可以设置css精灵图.
首先在标签内设置图片:
background-image:url(./img/0.webp);
设置不平铺
background-repeat:no-repeat;s
再设置图片的位置.
background-position:-9px -1px;
*/
3.文本
.box{
/*设置或检索内联元素在行框内的垂直对其方式 基线对齐：baseline*/
vertical-align:sub；
/*对象中内容的对齐方式:center.left.righ*/
text-align:center;
/*首行缩进*/
text-indent: 2em;
/*文本修饰 下划线：underline/上划线:overline/贯穿线：line-through*/
text-decoration:underline;
/*行高*/
line-height:50px;
/*指定字符之间的距离*/
letter-spacing: 10px;
/*指定单词之间的距离*/
word-spacing:30px;
/*强制文本在一行内显示,显示不出来的可能会出现半个文字的现象.*/
white-space:nowrap;
}
4.列表
/*去除无序列表的默认标签*/
ul,ol,li{
list-style:none;
}
5.盒子模型
/*1.外延边距的设置(盒子之间的距离)
margin:10px;
盒子居中显示 上下为0px 左右自动居中
margin:0 auto;
margin:10px 20px 30px 40px;
margin-left:10px;
margin-right:20px;
margin-top:30px;
margin-bottom:40px;*/
/*2.外边距border(对象边框的特性)
/*border默认的3个属性，默认4个边都将加上:
border-width: 1px;
border-style: dashed;
border-color: red;
简写
border: 1px dashed red;
border-style:solid;
第二个标签是方位
给左边的加上样式
border-left-width:2px;
border-left-style:solid;
border-left-color:blue;
简写
border-left:1px solid blue;
给右边的加上样式
border-right-width:2px;
border-right-style:dashed;
border-right-color:yellow;
border-right:solid 2px yellow;
给上边的加上样式
border-top-width:2px;
border-top-style:double;
border-top-color:pink;
简写
border-top:pink 2px double;
给下边的加上样式
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:gray;
border-bottom:2px solid gray;
第二个标签是样式
border: solid red;
当有一个值时是4个边，当有两个值时是(上下)和(左右)，当有3个值的时候是上(左右)下4个值是上右下左（顺时针）
border-width:10px 20px 30px 40px;
border-style:solid double solid dashed;
border-color:red blue pink gray;
/* 圆角 */
/* 顺时针 */
/*border-radius: 10px 20% 30% 40%;
border-radius: 50%;
*/
/*3.padding内部边距*/
/* 同margin */
补充:margin的塌陷问题:
/*如果一个盒子有margin-bottom值,下一个盒子有margin-top值,而在不会叠加,会取最大值,舍最小值*/
/*①垂直并列:垂直之间塌陷的原则是以两盒子最大的外边距为准*/
.box{
background-color:red;
margin-bottom:20;
}
.box1{
background-color:blue;
margin-top:30px;
}
/*--------------------------------------------------------------------------------------*/
/*②嵌套关系(父级元素塌陷)*/
/*子盒子和父盒子之间并没出现期望的100px间隙而是父盒子与子盒子一起与页面顶端产生了100px间隙（即父级盒子往下塌陷了10px）。*/
* {
margin: 0px;
padding: 0px
}
.box {
width: 200px;
height: 200px;
background-color: red;
/*解决办法1*/
/*border:1px solid pink;*/
}
.box1 {
width: 100px;
height: 100px;
background-color: #0000FF;
margin-top: 100px;
}
/*解决办法
1.给父元素添加边框.
border:1px solid pink;
2.在父元素中添加字体.
3.在2的基础上改良.
.mar::before{
content:"";
display:block;
overflow:hidden;
}
*/
<!--paddin问题
如果你设置了盒子的宽和高,padding会将盒子变大.如果没有设置盒子的宽高,而设置了盒子的父级标签的宽度,padding不会将盒子撑大,只会压缩内容的大小-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>padding问题</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul,li{
list-style:none;
}
.box{
width:100px;
border:1px solid red;
}
li{
width:100px;
border:1px solid blue;
padding:50px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
</body>
</html>
尺寸
p{
width:20px;
/*允许的最小值*/
min-width:20px;
/*允许的最大值*/
max-width:20px;
height:20px;
min-height:20px;
max-height:20px;
}
布局
/*display的值:*/
/*1.block块级元素
2.inline行内元素
3.inline-block:行内块元素
解决行内快元素中间出现空隙的方法:(给父级元素的字体大小设置为0,子集在重新设置字体的大小.)
*/
/*
4.none
隐藏但是不占位置
display:none;
隐藏并且占用位置
visibility:hidden;
*/
/*
5.flex
将对象作为弹性伸缩盒
在父级元素中设置display:flex;
在子级元素中设置:flex:2;
*/
```css
布局
```css
/*相对路径:相对于自己原来位置去定位,元素设置此属性之后仍然处在文档流中，不影响其他元素的布局*/
positon:relative;
left:150px;
top:10px;
/*绝对路径:相对于最近的一个定位元素去定位,如果父级没有定位元素,最终会相对于浏览器去定位.脱离了文档流*/
position:absolute;
left:150px;
top:10px;
/*固定路径:相对于浏览器(body)定位,*/
position:fixed;
top:50px;
/*粘性定位:相对于外层父元素*/
position:sticky;
top:20px;
/*
1 父元素不能overflow:hidden或者overflow:auto属性。
2 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3 父元素的高度不能低于sticky元素的高度
4 sticky元素仅在其父元素内生效
*/
/*z-index属性*/
/*z-indent只能在position中使用,默认数值是0,值越大,该标签就优先显示出来*/
.box1{
width:100px;
height:100px;
background-color:blue;
position:relative;
left:50px;
top:50px;
z-index:3;
}
/*overflow属性*/
/*设置字体隐藏效果*/
.body{
/*1.强制在一行内显示*/
white-space:nowrap;
/*2.超出隐藏*/
overflow:hidden;
/*3.隐藏显示省略号*/
text-overflow:ellipsis;
}
/*浮动:脱离了文档流,不浮动,左浮动,右浮动*/
span{
/*1.块级元素:浮动
宽高如果没有设置的情况下,宽高是默认内容的宽高
2.行内元素如果有浮动的话
宽高如果没有设置的情况下
宽高是默认内容的宽高,能直接给宽度和高度
*/
background-color:blue;
/*left/right/none*/
float:left;
width:100px;
height:500px;
}
/*给标签设置完浮动后,标签就会脱离文档流,会导致文档塌陷*/
/*文档塌陷的解决方法
1.给父元素设置高度/或在父元素内填充内容.
height:500px;
2.给父元素设置overflow:hidden;
弊端:
超出隐藏,如果有定位元素超出,就会隐藏.
3.clear清除浮动:
both/right/left;
在父元素内设置一个空白块标签,给该标签设置样式(clear:both;)
div{
clear:both;
}
弊端:代码臃肿,标签多余
*/
/*
4.改良
给父元素一个class="clearfix"
.clearfix::after{
content:"";
display:block;
clear:both;
将高度设置为0
height:0px;
隐藏但显示高度
visibility:hidden;
}
/*
/*兼容ie*/
*/
.clearfix{zoom:1}
*/
阴影
/*盒子阴影*/
.box{
/*阴影沿x轴的距离,阴影沿y轴的距离,阴影的模糊程度,阴影的颜色*/
box-shadow:5px 10px 5px red;
}
/*文本阴影*/
/*同上*/
text-shadow:5px 10px 5px blue;
透明度
/*类似与rgba中a的效果*/
.box{
opacity: .2;
}
响应式布局
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
扩展
阿里巴巴图片标签库:
bootstrap:轮播图,导航栏
扫一扫
3634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
