前端-css-长期维护
############### CSS简介 ################
# CSS
# HTML是骨架
# CSS是样式
# JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦，
# CSS：层叠样式表(英文全称：Cascading Style Sheets)
############### CSS的内容列表 ################
css的内容列表 1，css的引入，三种方式
2，css的选择器，
基本选择器，有四种，p # . *
组合选择器，
属性选择器
分组和嵌套
伪类选择器
伪元素选择器
选择器的优先级 3，css的各种属性，
宽和高，width，height，
字体属性，font-size，font-weight，color，
文字属性，text-align，text-decoration，text-indent，
背景属性，background-color，background-repeat，background-image，background-position，
display
盒子模型，margin外边距，border边框，padding内填充，content内容
float，三种取值，left，right，none，
clear，清除浮动，
overflow，溢出属性，
定位position， 4，综合应用案例
############### CSS的引入 ################
# CSS如何引入：
# 1，直接在标签中写style="样式1;样式2"
# 2，在head中通过style标签定义
# 3，把css文件单独写入一个文件，在head中通过link导入外部的css文件，
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: blue;
}
</style>
<link rel="stylesheet" href="test.css">
</head>
<body> <a href="" style="color: red">百度</a>
<p>海盐</p>
<h1>小明</h1>
</body>
</html>
css文件，test.css
h1{
color: green;
}
############### CSS的语法和注释 ################
/* css语法：
选择器{属性:值;属性:值} CSS注释：
有了注释整个的代码就很清晰了
*/ /*解释性的说明，这个文件是做什么用的*/ /*全局性的样式*/ /*导航条的样式*/ /*商品列表的样式*/ p{
color: green;font-size: 48px;
}
############### CSS的常用选择器 ################
/*
css选择器：
第一种：标签选择器
但是这种有局限，会导致所有的标签都是同样的样式，但是实际中往往是同样的标签可能会有不同的样式
*/ p{
color: green;
} /*
第二种：id选择器
这个选择器的优先级要高于标签选择器，到这里基本一个页面的所有的样式都可以定义了，
但是一个网页有几百个标签都要表上id才可以，
有没有简单的办法呢？
*/
#p2{
color: red;
} /*
第三种：类选择器，
因为id不能重复，但是类可以重复，所以只需要写一份类选择器就可以应用到多个标签，这个实际工作中是用的最多的，
*/
.c1{
color: black;
} /*第四种：通用选择器
对整个页面进行样式设置
*/
*{
font-size: 18px;
} /*
总结：
上面是最基本的选择器
# 标签选择器：适用于批量统一默认的样式，
# ID选择器：适用于给特定的标签设置样式
# 类选择器：适用于给某一些标签设置样式，
*/
对应的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body> <p id="p1">andy</p>
<p id="p2">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
<p class="c1">xiaomei</p>
</body>
</html>
############### CSS的组合选择器 ################
/*
还有一些不常用的，但是也会用到的选择器
组合选择器
*/
/*
第一种组合选择器：后代选择器
*/
/*这是标示id是d1的标签，下面的p标签，包含所有的后代，儿子，孙子标签*/
/*#d1 p{*/
/*color: red;*/
/*}*/ /*
第二种组合选择器：儿子选择器，只有儿子标签起作用，孙子标签是不起作用的
*/
#d1>p{
color: red;
} /*第三种组合选择器，毗邻选择器，必须是同级靠近的，而且只会往下找一个标签，再远的就不行了，
*/ div+p{
color: yellow;
} /*第四种组合选择器，弟弟选择器，这是这个标签下面所有的标签都会受到影响
*/ div~p{
color: blue;
}
对应的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body> <div id="d1">
<!--这是儿子标签-->
<p>div里面的p标签</p>
<span>div里面的span标签</span>
<div>
<!--这是孙子标签-->
<p>div中的div里面里面的p标签</p>
<span>div中的div里面里面的span标签</span>
</div>
</div> <!--毗邻选择器-->
<p>000</p>
<hr>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
</html>
############### CSS属性选择器 ################
/*属性标签*/
/*这是把属性是s9的标签，颜色变成红色*/
[s9]{
color: red;
} /*第二种方式*/
[s9="1"]{
color: green;
}
对应的html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body> <p s9="1">这是一个p标签</p>
<p s9="2">这是一个p标签</p>
<p>这是一个p标签</p> </body>
</html>
############### CSS的分组和嵌套选择器 ################
/*分组选择器*/ /*第一种写法*/
/*建议分组的时候，如果有多个标签，采用分行，但是记住一定要加逗号，否则就变成了后代选择器，*/
div,
p{
color: red;
} /*第二种写法*/
#d1,
p{
color: green;
} /*嵌套选择器*/
/*意思就是说不是一定要是一个标签，也可以是一个id表示的*/
#d1+p{
color: yellow;
}
对应的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body> <div id="d1">这是一个div</div>
<p>这是一个p标签</p> </body>
</html>
############### CSS伪类选择器 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--伪类选择器-->
<!--所有的标签都可以使用这个伪类选择器-->
<!--格式：选择器：命令{样式}，选择器可以是元素选择器，也可以是id选择器，-->
<style>
/*<!-- 没有访问过的标签使用这个颜色，必须是浏览器没有访问过的，访问过了就不是这个颜色，-->*/
a:link {
color: red;
} /*访问过的标签使用这个颜色*/
a:visited {
color: green;
}
/*鼠标移动上去，展示的颜色*/
/*这种网站上面用的非常的频繁，*/
a:hover{
color: aqua;
} /*被选定*/
a:active{
color: chocolate;
} /*input获取焦点时候的样式*/
input:focus{
outline: none;
background-color: yellow;
} </style>
</head>
<body> <a href="http://www.baidu.com">baidu</a>
<a href="http://www.sohu.com">sohu</a>
<input type="text"> </body>
</html>
############### CSS伪元素选择器 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--伪元素选择器-->
<!--这种下面有很多小的操作，用到的时候可以再查-->
<style> /*<!--选择第一个字-->*/
p:first-letter {
color: red;
font-size: 48px;
}
/*这是在c1这个标签的前面加东西*/
.c1:before {
color: red;
content: "*";
}
/*这是在c2这个标签的后面加东西*/
/*点击可以调整，这个可以使用js来绑定事件*/
.c1:after {
color: red;
content: "[?]";
} </style>
</head>
<body> <p>
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
在苍茫的大海上，
</p>
<p class="c1">在苍茫的大海上</p>
<p class="c1">在苍茫的大海上</p> </body>
</html>
############### CSS选择器的优先级 ################
# 选择器的优先级
# 1，内联标签，直接在标签内部写style，这种优先级最高
# 2，选择器都一样，谁靠近标签谁生效，因为浏览器加载文件是从上到下加载的，
# 3，内联样式权重是1000，id选择器权重是100，类选择器权重是10，元素选择器权重是1，元素选择器就是标签选择器，
权重计算永不进位，10个元素选择器也大不过一个类选择器，
############### CSS字体属性 ################
/*常用的css属性*/ /*全局通用的样式*/
* {
/*文字字体：如果浏览器不支持第一个字体，就就尝试下一个，如果都没有，就使用系统默认的，*/
font-family: "微软雅黑", "Arial", "sans-serif";
/*文字大小*/
font-size: 18px;
} .c1 {
/*字体的粗细（权重）*/
font-weight:;
/*字体颜色*/
/*第一种颜色方式：直接英文*/
/*color: red;*/
/*第二种颜色方式：rgb*/
/*color: rgb(255,0,122);*/
/*第三种颜色方式：16进制*/
/*这种可以使用浏览器的取色器来取色*/
/*color: #e21f6d;*/
/*第四种方式：rgba*/
/*最后一位是透明度*/
color: rgba(255, 0, 0, 0.1);
} .c2 {
font-weight:;
} .c3 {
/*这是文本对齐方式的属性，有居中，左对齐，右对齐，两端对齐*/
/*text-align: center;*/
/*文本样式，可以下划线，上划线，删除线，等等，用的不多*/
text-decoration: underline;
/*这是首行缩进，28像素，因为一个中文字体是14像素*/
text-indent: 28px;
} a {
/*有的公司会专门把超链接下面的默认的下滑线去掉，就是用这个，这个用的比较多*/
text-decoration: none;
}
对应的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body> <p>这是一个p标签</p> <p class="c1">c1</p>
<p class="c2">c2</p> <div class="c3">围城</div>
<a href="http://baidu.com">百度</a>
</body>
</html>
############### CSS背景属性 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css的背景属性-->
<style>
.c1 {
/*背景颜色*/
background-color: red;
} .c2 {
width: 800px;
height: 800px;
/*这是填充背景图片*/
/*默认是重复展示，一直铺满*/
background-image: url("http://img3.imgtn.bdimg.com/it/u=3595140452,1077552905&fm=26&gp=0.jpg");
/*这是是否重复*/
/*这是不重复，默认是摆在左上角*/
background-repeat: no-repeat;
/*这是沿着x轴重复*/
/*background-repeat: repeat-x;*/
/*这是沿着y轴重复*/
/*background-repeat: repeat-y;*/
background-position: center;
/*把这个图片固定住*/
background-attachment: fixed;
/*边框的宽度*/
/*border-width: 10px;*/
/*边框的颜色*/
/*border-color: green;*/
/*边框的风格*/
/*border-style: solid;*/
/*这三个可以写到一起,简写*/
border: 10px solid green;
/*还可以专门设置左边的线，右边的线，*/
} .c3 {
background-color: red;
/*设置不展示这个标签，页面不展示，都是代码是有的*/
/*display: none;*/
/*设置成行内*/
display: inline;
} .c4 {
/*这是设置成为块*/
/*本身span标签是行内标签，不能设置高度和宽度，但是如果设置成了块级标签，就可以设置了，*/
display: block;
width: 100px;
height: 100px;
border: 10px solid green;
} ul{
/*这是去掉小圆点*/
list-style-type: none;
}
li{
/*变成行内标签*/
display: inline;
/*这是设置在右侧有一个边框，黑色*/
border-right: solid 1px #666666;
} li.last{
/*这是设置最后一个右侧没有边框，*/
border-right: none;
} </style>
</head>
<body> <div class="c3">div</div>
<div class="c1">围城</div> <div class="c2"></div>
<span class="c4">span</span>
<ul>
<li>电脑</li>
<li>手机</li>
<li class="last">宝宝</li>
</ul> </body>
</html>
############### CSS的盒子模型，这个非常的重要 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--盒子模型有四层
1，content，内容,width height 就是设置的内容的宽度，
2，padding，内填充，padding设置，
3，border，边框，border，border-width，border-color，border-style，都是设置的边框，
4，margin，外边距-->，margin设置，
<style> .c1 {
width: 200px;
height: 300px;
border: 5px solid green; /*调整两个标签之间的距离，就使用margin调整*/
/*这是margin上下左右都是10像素*/
/*margin: 10px;*/
/*margin-top: 50px;*/
/*margin-left: 100px;*/
/*右侧虽然设置了15，但是div是一个块级标签，在右侧空的地方还是会默认使用外边距进行填充*/
/*margin-right: 15px;*/
/*margin-bottom: 100px;*/
/*可以合到一起写，而且推荐也是合到一起写，按照上右下左的方式*/
/*margin: 5px 10px 15px 20px;*/
/*可以写两个，就是上下，左右*/
margin: 10px 20px; /*调整内容和边框的距离，使用padding，padding也可以简写*/
padding: 10px; } ul {
/*这是去掉小圆点*/
list-style-type: none;
} li {
/*变成行内标签*/
display: inline;
/*这是设置在右侧有一个边框，黑色*/
/*border-right: solid 1px #666666;*/
/*这样写padding是上下左右都是增加10像素*/
/*padding: 10px;*/
} li.last {
/*这是设置最后一个右侧没有边框，*/
border-right: none;
} li > a {
border-right: 1px solid red;
padding-right: 15px;
padding-left: 15px;
} </style>
</head>
<body> <div class="c1">12</div> <ul>
<li><a href="">电脑</a></li>
<li><a href="">手机</a></li>
<li class="last"><a href="">宝宝</a></li>
</ul> </body>
</html>
############### CSS浮动 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--清除浏览器默认的样式-->*/
* {
margin: 0;
padding: 0;
} .c1 {
height: 100px;
width: 20%;
background-color: red;
/*浮动：float*/
/*在css中任何元素都可以浮动*/
/*浮动的作用就是在摆不开的时候可以往下自动移动*/
/*任何标签设置浮动之后，都会变成一个块级标签，都可以设置宽度和高度了，*/ /*div是块级标签，默认占据一行，我想要都往左堆积就要使用到浮动*/
/*可以使用浮动来做页面的布局*/
float: left;
} .c2 {
height: 100px;
width: 80%;
background-color: blue;
float: left;
} </style>
</head>
<body>
<div>
<div class="c1">12</div>
<div class="c2">12</div>
</div>
</body>
</html>
############### CSS的overflow，实现一个圆形的头像 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .c1 {
border: 1px solid black;
width: 120px;
height: 120px;
/*<!--如果标签空间小，但是内容多，会有溢出-->*/
/*可以加一个滚动条*/
overflow: auto; } /*这种网站头像会用到*/
.c2 {
border: 1px solid black;
width: 120px;
height: 120px;
/*这是显示一个圆的头像*/
border-radius: 100%;
/*这是溢出的隐藏起来*/
overflow: hidden; } img{
/*这是适应div大小*/
max-width: 100%;
}
</style>
</head>
<body> <div class="c1"> fjljaldsjlf
jadslfjlajdslkfj
ajsdlfjladsjlfads
fadsf
adsfadfadsfad
fad
sf
</div> <div class="c2">
<img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="">
</div> </body>
</html>
############### CSS清除浮动 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
border: 1px solid red;
} .c1 {
width: 50px;
height: 50px;
background-color: blue;
border: 1px solid black;
/*这个时候浮动了，但是父级标签的边框就浮到上面去了，从父标签跑出来，*/
float: left;
} /*第一种解决方法：加一个空的div，然后让他左边不能有浮动的标签*/
/*.c2{*/
/*!*这是左边不能有浮动的标签*!*/
/*clear: left;*/
/*}*/ /*第二种方法：*/
/*#d1:after{*/
/*content: "";*/
/*clear: both;*/
/*display: block;*/
/*}*/ /*第三种方法，这是常用的方法*/
.clearfix:after{
content: "";
clear: both;
display: block;
} /*清除浮动的副作用*/
</style>
</head>
<body> <div id="d1" class="clearfix">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<!--<div class="c2"></div>--> </div> </body>
</html>
############### CSS定位 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> *{
margin: 0;
padding: 0;
} .c1,
.c2,
.c3,
.c4{
width: 100px;
height: 100px;
} .c1{
background-color: red;
} .c2{
background-color: blue;
/*这个相对定位是相对于原来的*/
position: relative;
left: 150px;
top: 100px;
} .c3{
background-color: green;
} .c4{
background-color: yellow;
/*决定定位，相对于最近的一个祖宗标签*/
position: absolute;
left: 150px;
top: 100px;
} .fixed-text{
/*这是固定位置*/
position: fixed;
left: 20px;
top: 20px;
background-color: gray;
} </style>
</head>
<body> <div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="fixed-text">c4</div>
</body>
</html>
############### css+html-博客首页 ################
html页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="test.css">
</head>
<body> <!--左侧边栏 开始-->
<div class="left"> <!--头像 开始-->
<div class="header-img">
<img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg" alt="">
</div>
<!--头像 结束-->
<div class="blog-name">andy-blog</div>
<div class="blog-info">什么也没有</div> <!--连接区 开始-->
<div class="blog-links">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">关于我</a></li>
<li><a href="">关于我</a></li>
</ul>
</div>
<!--连接区 结束--> <!--文章分类 开始-->
<div class="blog-links">
<ul>
<li><a href="">JS</a></li>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
</ul>
</div>
<!--文章分类 结束--> </div> <!--左侧边栏 结束--> <!--右边栏 开始-->
<div class="right">
<div class="artical-list">
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div> </div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div> </div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div> </div>
<div class="artical">
<div class="artical-title">
<h1 class="artical-name">海盐</h1>
<span class="artical-date">2019-12-12</span>
</div>
<div class="artical-info">《斗破苍穹》是一本连载于起点中文网的古装玄幻小说，作者是起点白金作家天蚕土豆（李虎），已完结。
这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气...</div>
<div class="artical-tag">
#JS #CSS
</div> </div>
</div> </div>
<!--右边栏 结束--> </body>
</html>
对应的css样式：
/*博客页面的相关样式*/
/*公共的样式*/
* {
/*font-family: "微软雅黑";*/
font-size: 14px;
margin: 0px;
padding: 0px;
}
/*去掉超链接的下滑线*/
a {
text-decoration: none;
}
/*左边栏 样式*/
.left {
width: 20%;
height: 100%;
position: fixed;
background-color: rgb(76, 77, 76);
left:;
top:;
}
.header-img {
height: 128px;
width: 128px;
border: 5px solid white;
/*这是显示一个圆的头像*/
border-radius: 100%;
/*这是溢出的隐藏起来*/
overflow: hidden;
margin: 0 auto;
margin-top: 20px;
}
.header-img > img {
max-width: 100%;
}
/*blog名称*/
.blog-name {
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 15px;
}
/*blog介绍*/
.blog-info {
color: white;
text-align: center;
border: 2px solid white;
margin: 5px 15px;
}
/*连接组和标签组*/
.blog-links,
.blog-tags {
text-align: center;
margin-top: 20px;
}
.blog-links a,
.blog-tags a {
color: white;
}
/*在标签前面都加上井号*/
.blog-tags a:before {
content: "#";
}
/*右边栏 样式*/
.right {
width: 80%;
height: 1000px;
background-color: rgb(238, 237, 237);
float: right;
}
.artical-list {
margin-left: 30px;
margin-top: 30px;
margin-right: 10%;
}
.artical {
background-color: white;
margin-top: 15px;
}
.artical-title {
padding: 15px;
border-left: red solid 3px;
}
.artical-name {
display: inline-block;
}
/*文章发布时间*/
.artical-date {
float: right;
}
.artical-info {
padding: 15px;
}
.artical-tag {
padding: 15px 0;
margin: 15px;
border-top: 1px solid #eeeeee;
}
############### css浮动做导航条 ################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style-type: none;
} .nav {
background-color: black;
padding: 15px 0;
} .nav-left li {
float: left;
padding: 20px;
} .nav-right {
float: right;
padding: 20px;
} /*清除浮动*/
.clearfix:after,
.clearfix:before {
clear: both;
content: "";
display: block;
} .ss {
width: 80%;
/*上下0，左右自动*/
margin: 0 auto;
}
</style>
</head>
<body> <!--class里面可以放多个属性的，-->
<div class="nav"> <div class="ss clearfix">
<div class="nav-left">
<ul>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
<li><a href="">玉米商城</a></li>
</ul>
</div>
<div class="nav-right">
<a href="">登陆</a>
<a href="">注册</a>
<a href="">购物车</a> </div> </div> </div> </body>
</html>
############### CSS ################
############### 结束线 ################
前端-css-长期维护的更多相关文章
- 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿
周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- day 45 前端CSS
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...
- 前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- 前端 CSS 目录
前端 CSS 介绍 前端 CSS语法 前端 CSS 注释
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
- 前端——CSS选择器
目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...
随机推荐
- UML-GRASP后4种模式
1.多态 1).什么是多态 问题:if-else耦合度过高 解决: 方法1:接口 方法2:超类里需多态的方法前加上{abstract} 2).相关模式 防止异变 大量GoF,如适配器(Adapter) ...
- OpenMP笔记(二)
原文:https://www.bearoom.xyz/2019/02/18/openmp2/ OpenMP是由三部分组成的:指令.库函数和环境变量. 一.指令 在C/C++中使用OpenMP需要用到的 ...
- Spring framework体系架构
Spring3.x 图中将spring分为5个部分:core.aop.data access.web.test,图中每个圆角矩形都对应一个jar,如果在maven中配置,所有这些jar的"g ...
- Anaconda Installation on Mac: conda command not found 环境变量配置
Mac系统安装完Anaconda 3.7后在terminal输入conda --version,返回command not found 原因可能是没有配置环境变量 在terminal输入vi ~/.b ...
- Java 开发者必须了解的 16 个Java 顶级开源项目！
本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb/JavaGuide ([Java学习+面试指南] 一份涵盖大部分Java程序员所需要掌握的核 ...
- Java连接MySQL Warning: Establishing SSL connection without server's identity verification is not recommended
1. 数据库 1.1 创建表 在当前数据库students中,创建数据表student: mysql> create table student( ),#学生ID ),#学生姓名 -> a ...
- ZJNU 1196 - 三阶魔方【模拟题】——高级
大模拟,空想很容易把面和面之间的关系搞混 所以这时候需要自己找一个正方体(实在不行长方体代替)跟着图把每个面正方向标出来 然后模拟6种操作分别会对哪些块进行操作 对于储存数据的想法是,对输入输出进行分 ...
- 14. docker 网络 docker bridge0 详解
1.创建一个 container docker run -d --name test1 busybox /bin/sh -c "while true; do sleep 3600; done ...
- 0.3W微功率放大器
电路结构 电路摘自<晶体管电路设计(上)>. 电路采用+5V单电源供电,两级结构.Tr1构成共射极放大电路作为电压放大级:Tr3,Tr4构成推挽的射极跟随器作为输出级:Tr2作为射极跟随器 ...
- Ioc和依赖注入
转自https://www.cnblogs.com/zhangzonghua/p/8540701.html 1.IOC 是什么 IOC- Inversion of Control , 即“控制反转” ...