CSS+HTML+JS中的css
CSS中的一些用法
首先,在css的书写中,“#”:ID选择器,代表的是获取html中“id”相对应的元素,“.”:类选择器,代表的是获取html中“class”相对应的元素。例如:
#header .nav a{
background-color: orange;
}
- 1
- 2
- 3
其中在,自定义的名称之后加上空格表示包含的关系,例如:
就包含在 >中,而“ a ”为标签选择器,标签包含在 之中。id选择器中的样式优先级要高于class的选择器样式。行内样式的写法,使用style标签属性直接写css样式 这种样式的优先级最高。比如:<div style="width:100px;margin: auto;">
<button class="btn" type="button">按钮</button>
</div>
- 1
- 2
- 3
css是从上往下读代码,后面css产生的效果会覆盖前面相同的css产生的属性 。
-
body{margin : 0;}
—— 解决白边问题。 -
border: 1px solid yellow;
——边框颜色,此处则为,粗细1像素的黄色边框。 -
border-bottom: 1px solid #CCCCCC;
——设置下边框为粗细1像素,黄色线条。 -
border-bottom: 1px dashed #CCCCCC;
——设置下边框为粗细1像素,黄色连点----虚线。 -
border-width: 0;
——边框宽度 -
border-radius: 50%;
——边框圆角,50%是圆角的程度,也可以使用像素表示。只写一个参数的时候,使得四个角都呈现圆角。 -
border-radius: 10px 30px;
——写两个参数值的时候,第一个参数是使得左上角,右下角变化,第二个参数使得右上角和左下角变化。 -
border-radius: 10px 30px 60px;
——写两个参数值的时候,第一个参数是使得左上角变化,第二个参数使得右上角和左下角变化,第三个参数使得右下角变化。 -
border-radius: 10px 30px 50px 70px;
——写两个参数值的时候,第一个参数是使得左上角变化,第二个参数使得右上角变化,第三个参数使得右下角变化 ,第四个参数使得左下角变化。 -
border-radius: 200px/50px;
——使用 / 来表示,左边的值表示水平轴的值,右边的值表示垂直轴的值;两者互相影响的一个比例效果。 -
border-top-right-radius: 0.3125rem;
——右上角圆角。 -
border-top-left-radius: 0.3125rem;
——左上角圆角。 -
border-collapse:collapse;
——将表格内部的每格之间的空白都去掉。 -
height : 350px;
——设置高度,此处为350像素。当height后面跟着的不是像素,而height100%
必须要结合绝对定位position:absolute
才能配合使用. -
line-height: 10px;
——设置行间距离。 -
width: 200px;
——设置宽度,此处为200像素。当width后面跟着的不是像素,而是百分比时,则是占据页面的比例。 -
width: calc(100%-10px);
——也是设置对象的宽度,但是由百分比和像素一起使用。 -
background-color : blue;
——设置背景颜色,此处为蓝色。 -
font-size: large;
——字体变大,如果后面跟着的是多少像素,则是设置字体大小。 -
font-family:楷体
——设置字体,比如:宋体,楷体,隶书等。 -
font-style: italic;
——字体样式倾斜。 -
color: #FFF00;
——设置字体颜色,此处为黄色。 -
padding: 10px;
——设置内边距,此处为十像素。 -
padding-bottom: 10px;
——仅设置距离下方的内边距为十像素。 -
padding-left: 10px;
——仅设置距离左方的内边距为十像素。 -
float: left;
——字体向左浮动,一旦浮动后,就会脱离文档流。浮动往往和html中父级节点的overflow: auto;连用,确保父级节点的高度。float往往多用在大的模块调整上面,使用的时候必须注意浮动脱离文档流。往往结合clear属性,overflow属性。 -
clear: both;
——和float结合使用,使得另起一行。 -
overflow: auto;
——使用浮动时候结合使用,可以使得容器的宽高自动体现出来。 -
over-flow:scroll
——让页面中的溢出的文字以滚动条的形式显示。 -
over-flow:hidden
——把溢出的文字直接隐藏。 -
text-decoration: none;
——取消字体下划线。 -
text-align: center;
——居中。 -
text-shadow: aqua 5px -5px 20px;
——给文字添加阴影。使用text-shadow至少要使用三个值,分别是颜色,水平偏移距离,垂直偏移距离 (偏移值如果是负值就是反方向偏移)。一共有五个值——box-shadow:颜色,水平偏移距离,垂直偏移距离,模糊像素值,内部(inset)或外部阴影(不用写这个值,默认就是外部)。 -
.header .nav a:hover{ }
——格式—元素:hover,代表鼠标经过时触发样式。行为伪类hover:注意:冒号前后不要有空格。例如:
.header .nav a:hover{ /* 表示当鼠标放置时标签背景颜色为橘色*/ background-color: orange; /* 表示把鼠标变成手指 */ cursor: pointer; }
- 1
- 2
- 3
- 4
- 5
- 6
-
.nav a:visited{}
——被访问过之后的状态。{}内用法与行为伪类hover:相同。 -
left: 0;
,right: 0;
,top: -10px;
——都表明对象显示位置,当我们使用负数的时候,效果是往相反的方向。 -
margin: auto;
——居中。 -
margin: 20px auto;
——第一个参数是上下距离,第二个是居中。 -
margin-left:10px;
——距离左底边十像素。 -
margin-bottom:10px;
——距离下底边十像素。 -
margin-top: 10px;
——距离上底边十像素。 -
background-image:url(../img/a%20(2).jpg);
——设置背景图片,url中代表所在路径,这个路径是相对于css所在位置的。 -
background-repeat:no-repeat;
——背景不重复,不会出现很多种相同图片。 -
background-repeat-y:no-repeat;
——背景纵向不重复。"-x"则为横向不重复。 -
background-size:100% 100%;
——设置背景的尺寸,水平方向以100%显示,垂直方向也以100%显示。 -
background-size: cover;
——可以让背景图片的大小为最合适的居中显示,但是图片比容器大的部分将被截断。 -
background-position:bottom;
——背景图片位置居下。 -
background-position-x:center
——背景图片横向居中,"-y"则为纵向居中。 -
background-attach:fixed
——让背景图片固定住,不能随之变动。 -
background-attach:scroll
——让背景图片固定,并且溢出时可以往下滚动。 -
position: relative;
——相对定位。一般要写在绝对定位的父级标签中。 -
position: absolute;
——绝对定位。绝对定位后会脱离文档流。绝对定位使用的时候一定要和相对定位一起使用,这样效果最佳。 -
position: fixed;
——把元素固定在页面的指定的位置,不受滚动条影响. 用法类似于absolute,而absolute会受到滚动条的影响。 -
z-index: 100;
——绝对定位的层次关系的位置,z-index的值越大,越在上层,z-index这个css必须结合position绝对定位才生效。 -
*{}
——通配符选择器,作用于所有的标签。 -
table tr td,table tr th{}
——控制列的边框,tr中其实没有边框,","是分组选择器,表示前后一起受{}内属性影响。 -
#main h1+p{}
——相邻选择器+: h1+p,这个选择器影响的不是h1标签,而且是相邻的p标签。 -
#main2 h1~p{}
——兄弟选择器: h2~p受影响的是弟弟们而不是自己,影响的是h2后面所有的直接的p。 -
a[id]{}
——元素【属性】——元素中包含了某个属性即可,而不需要管属性值是多少。 -
a[class="two"]{}
——元素【属性=值】元素中的属性完全等于某个属性值才被匹配。 -
a[title~="zk"]{}
——元素【属性~=值】属性中的值是成空格隔开的类型的时候使用。 -
a[ljy2^="喔"]{}
——元素【属性^=值】属性中的值是以某个值开头的时候使用。 -
a[ljy2$="呵"]{}
——元素【属性$=值】属性中的值是以某个值结尾的时候使用。 -
a[lang|="zh"]{}
——元素【属性|=值】属性中的值是以"值-"出现的时候使用。 -
a[con*="e"]{}
——元素【属性*=值】属性中包含某个值的内容 。 -
display: block;
——显示。Block可以将普通标签格式化成宽度为100%的div类型的块级元素。 -
display:none
——使得所选区域隐藏。none代表元素隐藏。 -
display:inline-block
——可以使得一个容器在同一行。inline-block将普通标签格式化为div类型的标签,但是没有换行,且宽度自适应内容。往往用在小的标签上面。 -
opacity: 0.8;
——所选区域透明度。 -
@media (min-width:400px) {}
——屏幕自适应,当屏幕大于400px时,发生变化。从小屏幕做大大屏幕,那么使用min-width,从大屏幕做到小屏幕,那么使用max-width。这使得页面自动响应。这就是经典的响应式设计。 -
letter-spacing: 10px;
——文本中字体间距。 -
.onerow p:not(.t){}
—— 除了指定的项,其他全部受到影响,括号内只能填写标签或者id或者class。 -
word-spacing:5px
—— 字体间距。 -
css3自定义字体:
/* 自定义时候必须要有两个属性
1.font-family 自定义字体的名称
2.src指字体来源,url表示路径 */
@font-face {
/* 使用时候就直接使用自定义字体的名称 */
font-family:"zkfont";
src: url("China.ttf");
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
</div>
<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
<div class="more-toolbox">
<div class="left-toolbox">
<ul class="toolbox-list">
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#csdnc-thumbsup"></use>
</svg><span class="name">点赞</span>
<span class="count">4</span>
</a></li>
<li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-Collection-G"></use>
</svg><span class="name">收藏</span></a></li>
<li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-csdnc-fenxiang"></use>
</svg>分享</a></li>
<!--打赏开始-->
<!--打赏结束-->
<li class="tool-item tool-more">
<a>
<svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
</a>
<ul class="more-box">
<li class="item"><a class="article-report">文章举报</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="person-messagebox">
<div class="left-message"><a href="https://blog.csdn.net/qq_42266891">
<img src="https://profile.csdnimg.cn/7/B/3/3_qq_42266891" class="avatar_pic" username="qq_42266891">
<img src="https://g.csdnimg.cn/static/user-reg-year/1x/2.png" class="user-years">
</a></div>
<div class="middle-message">
<div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_42266891" data-report-click="{"mod":"popu_379"}" target="_blank">SEVEN clock</a></span>
</div>
<div class="text"><span>发布了4 篇原创文章</span> · <span>获赞 4</span> · <span>访问量 158</span></div>
</div>
<div class="right-message">
<a href="https://im.csdn.net/im/main.html?userName=qq_42266891" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
</a>
<a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a>
</div>
</div>
</div>