CSS 样式

css 引入的三种方式

行内式
内接式

在 head 标签中写 style标签

外接式

<link rel="srtlesheet" href="css的文件路径">
或者
<style type="text/css">
    @import "css文件路径"
</style>

权重问题

数数量 id class 标签

<style type="text/css">

    /*权重问题 数数  数选择器的数量  id class 标签*/
    /*1 0 0*/
    #box{
        color: darkorange;
    }
    /*0 1 0*/
    .box-beijing{
        color: green;
    }
    /*0 1 0*/
    .active{
        color: yellow;
    }
    /*001*/
    div{
        color: red;
    }

/* 行内权重1000 > id 100 > 类 10 > 标签 1*/
/*继承来的权重为0,与选中的标签没有可比性*/
</style>

选择器

外接式的选择器

/*后代选择器*/
.box1 p{
    color: red;
}
/*子代*/
.box2>p{
    color: yellow;
}
/*组合选择器*/
p,span,a{
    font-size: 12px;
}
*{
    font-size: 14px;
    padding: 0;
    margin: 0;
}
/*交集选择器*/
.box-beijing{
    color: red;
}
p{
    font-size: 20px;
}
p.active{
    background-color: yellow;
}

/* 类型选择器 */
input[type='text']{}
ul li:first-child{ 选择第一个 }
ul li:last-child{ 最后一个 }
ul li:nth-child(4){ 第四个 }
ul li:first-child(2n){ 间隔两个 }


/*伪类选择器  爱恨准则*/ 

/*没有被访问之前的样式*/
a:link{  }
/*访问过后的颜色*/
a:visted{  }
/*鼠标悬浮时的状态*/
a:hover{  }
/*按住时的样式*/
a:active{  }

/* 微元素选择器  content 的内容会添加到 对应的位置 before after */
div:before{
    content: '鸡汤';  
}
div:after{
    /*行内的元素*/
    content: '鸡汤';
    font-size: 20px;

}

常用样式

/*设置字体颜色*/
color: #00b481;
/*设置字体大小*/
font-size: 40px;
/*设置背景色*/
background: #64a8f9;
/*去掉下划线*/
text-decoration: none;
/*设置   小手状态*/
cursor: pointer;
/*显示 转成块*/
display: block;
/*转成行内块*/
display: inline-block;
/*隐藏*/
display: none;
/*隐藏边框*/
border: 0;
/*去除边框*/
outline: none;
/*设置长宽*/
width: 300px;
height: 40px;
/*设置出入框及颜色*/
border: 1px solid #999;
/*将输入框 圆弧*/
border-radius: 2px;
            /*还是在一行显示  转成行内块*/
            display: inline-block;

盒模型

标准文档流下的微观现象

空白折叠
高矮不齐,底边对齐
自动换行

盒模型的计算

盒子在文档占据的宽度 = 内容的宽度+2*padding+2*border

width: 200px;  
height: 200px;
padding: 50px;   内边框
border: 1px solid blue;  边线
margin: 30px;  外边框

padding

/*四个方向都有值*/
padding: 30px;
/*两个值:上下  左右*/
padding: 20px 30px;
/*三个值: 上 左右  下 */
padding: 30px 20px 40px;
/*四个值: 上 右 下 左 顺时针*/
padding: 20px 30px 40px 50px;
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;

border

/*根据方向 设置四边线*/

/*设置上边线  solid  实线*/
border-top: 5px solid black;
/*设置右边线  dotted  点线*/
border-right: 5px dotted #1d4fd4;
/*设置下边线  double 双实线 */
border-bottom: 5px double black;
/*下边线 dotted 虚线*/
border-left: 5px dashed #1d4fd4;

/*根据三要素 设置*/
/*三要素  粗细   线性样式   颜色*/
border: 1px solid chartreuse;

/*上  左右  下*/
border-width: 5px 10px 30px;
/*实线  电线  虚线*/
border-style: solid dotted dashed;
/*上     右      下     左*/
border-color: #1d4fd4 firebrick aqua darkviolet;
/*去掉边线*/
border: 0;

border-left: 100px solid blue;
border-right: 100px solid blue;

/*画一个圆*/
border-radius: 50%;

/*画一个三角形*/
width: 0;
height: 0;
/*transparent 透明*/
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid black;

margin

/*
css 奇淫技巧   margin垂直方向塌陷
弹出的边界会重合 以长的为准
如何避免 只要设置一个方向
margin  描述的是兄弟标签 的之间的距离
padding 描述的父子标签
*/
<div  class="top"></div>
<div class="header"></div>

/*让盒子居中*/	
margin: 0 auto;
/*em 相对单位 相对于当前盒子的字体大小*/
margin: 0 .5em;

overflow 处理溢出问题

/*继承*/
overflow: inherit;
/*超出部分可见*/
overflow: visible;
/*超出部分隐藏*/
overflow: hidden;
/*超出部分有滚动条*/
overflow: scroll;
overflow: auto;

浮动 float

浮动的现象
- 字围效果
- 脱标(脱离标准文档流)
- 贴边现象(第一个盒子会贴父盒子的边,第二个盒子浮动会贴第一个盒子的边)
- 收缩效果(块级元素隐式的转换成行内)
- 压盖现象,但是我们不用浮动做压盖.要浮动一起浮动,有浮动清除浮动
- 如果想做压盖想象用定位
浮动带来的好处
- 对于布局来说,是非常有用
- 实现元素并排
浮动带来的坏处
- 前提是父盒子没有高度,对子盒子设置浮动,那么子盒子的高度不会撑起父盒子高度.因为子盒子设置了浮动,脱标了,不在文档上占位.

/*如果标签一旦浮动,就不区分行内标签还是块级标签,可以任意设置宽高 简称“收缩效果”*/
/*浮动之后 就可以改变 行内标签的大小*/
/*display: inline-block;*/

/*浮动这个标签 向右*/
float: right;
/*浮动这个标签 向左*/
float: left;

处理浮动问题

在浮动行的 标签中 添加一个div 标签 用于处理浮动  添加 下面的样式
/*处理浮动问题*/
clear: both;

伪元素清除法

/*伪元素去除  直接复制 此 样式 放上去 修改 clearfix 要 处理的 问题*/
.clearfix:after{
    /*在行内添加一个点撑开 箱子*/
    content: '.';
    /*水平显示 转成块*/
    display: block;
    /*隐藏  元素不占位置*/
    /*display: none;*/
    /*隐藏 元素  位置还占着呢  */
    visibility: hidden;
    /*设置高度*/
    height: 0;
    /*处理浮动问题*/
    clear: both;
}

overflow 清除

/*但是不要忘了它本来的一层的意思*/
overflow: hidden;

文本和字体

background-color: rgb(69, 146, 236);

/*RGB的三个数分别是红色R，绿色G，蓝色B，相当于三维坐标。
数值越高颜色越重*/
/*规定每个分量的最大值为255，最小为0。
红色只有红色分量，没有绿色分量和蓝色分量，因此为255，0，0。
绿色与蓝色类似。
黄色=红+绿，相加的结果就是255，255，0。
白色为0，0，0。
黑色为255，255，255。*/

/*实色 rgb*/
background-color: rgb(0,0,255);
/*透明色*/
background-color: rgba(69,146,236,.5);

/*文本对其 默认左对齐  居中  右对齐*/
text-align: left;
text-align: center;
text-align: right;
/*两端对齐*/
text-align: justify;

/*高度居中对齐*/
line-height: 300px;


/*文字之间的距离*/
letter-spacing: 10px;

/*文字开头空两个文字 2em */
text-indent: 2em;

text-decoration: #00b481;

/*下划线*/
text-decoration: underline;
/*中线*/
text-decoration: line-through;
/*上线*/
text-decoration: overline;

/*修改字体*/
font-family: "宋体";
/*字体大小 按比例  字体*/
font: 14px/1.5 "楷体";
/*字体的粗细*/
font-weight: 400~900; 

/* 添加文本 */
div:before{content:"给行内元素左侧添加"}
div:affer{content:"给行内元素右侧添加"}

/* 在 p 标签 中使文本变成快 并在当前大小的盒子中 上下左右居中 */
display:flex;
align-items:center;  # 上下居中
justify-content: space-around; # 左右居中

background属性

背景颜色 background-color
- 颜色表示法: 单词 rgb 十六进制
背景图片 background-image:url('')
背景图定位 background-position: x方向 y方向
- 如果x和y方向是正值,表示调整背景图的位置
- 如果是负值表示"精灵图技术"(在一张大图有多张小图片)
banner图设置大图来说

background-color: black;
border: 1px solid yellow;
/*设置背景图  默认 横向纵向铺满整个屏幕 */
background-image: url(./images/狗狗.jpg);

/*只显示一张  repeat 重复*/
background-repeat: no-repeat;

/*指定背景   不重复   调整位置   第一项左右 */
background: url("./images/美女桌面.jpg") no-repeat -89px 0;

/*不重复   居中  靠上*/
background: url("./images/美女桌面.jpg") no-repeat center top;

/* 将图片调整到中间 左宽度    高度  精灵图技术 */
/* 	如果 x,y 为正值 表示调整背景图
	如果 x,y 为负值 表示切图   */
background-position: 448px -135px;

/*left center right*/
background: url("./banner.jpg") no-repeat center top;

/* 参数: repeat : 平铺  repeat-x : x方向平铺 repeat-y : y方向平铺  */,

背景图:

background-image:url('链接的图片资源') 默认是横向平铺,纵向平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y
雪碧图(精灵图技术) background-position: x y
- 如果x和y是正值,表示的是调整背景图的位置
- 如果x和y是负值,表示的是切图(精灵图技术)
使用雪碧图的好处：

1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

定位

布局的一种方法
相对定位
- position:relative;
如果对一个盒子仅仅设置相对定位,这个盒子没有任何变化

参考点

以原来的位置

相对定位有压盖想象,小心相对定位留的坑

相对定位的作用
- 微调元素
- '子绝父相'
绝对定位

position:absolute

参考点

单独设置绝对定位,以top描述,是以页面的左上角(区分浏览器左上角)

以bottom描述,是以浏览器左下角

绝对定位的现象
- 脱标
- 压盖(层级提高用绝对定位)
父相子绝的参考点

父辈元素设置相对定位,子盒子设置绝对定位,是以父辈盒子的左上角为参考点\
固定定位

固定定位的现象
- 脱标
- 提升层级
- 页面内容一多,盒子固定住
参考点

以浏览器的左上角

/*相对定位   根据自己原有的位置计算 */
position: relative;
top: 20px;
left: 200px;
/* 绝对定位  脱标  压盖*/
position: absolute;
top: 30px;
left: 50px;
/* 固定定位  脱标  压盖*/
position: fixed;
top: 30px;
left: 50px;
z-index: 1233;  层级显示

z-index

与定位有关系数值默认0 数值越大表示层级越高.

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

重置样式表

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

iconfont 的使用

地址


<i class="iconfont">&#xe643;</i>

unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

posted @ 2019-05-01 18:54 拐弯阅读(828) 评论(0) 编辑收藏举报

刷新页面返回顶部

拐弯

CSS 样式

CSS 样式

css 引入的三种方式

权重问题

选择器

常用样式

盒模型

padding

border

margin

overflow 处理溢出问题

浮动 float

文本和字体

background属性

背景图:

使用雪碧图的好处：

不足：

定位

相对定位

参考点

相对定位的作用

绝对定位

参考点

固定定位

固定定位的现象

z-index

重置样式表

iconfont 的使用

unicode引用

公告