CSS

阅读量：6863 次

发布时间：2019-06-26

本文共 10584 字，大约阅读时间需要 35 分钟。

CSS:层叠样式表

主要作用:

站在审美的角度对HTML网页进行美化！

HTML只能实现网页的结构。

css的四种引入方式 :

1.行内式(不建议使用)

    
          Title
      
      
       我是第一块
      
      
       我是第二块

View Code

2.嵌入式

View Code

3 链接式(用的最多)

    
          Title    
          
      
      
       我是粉色
      
c1.css文件为:c1{             background-color: pink;             width: 100px;             height:100px;         }    
          Title

View Code

4.导入式(不建议使用)

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

View Code

CSS选择器:

CSS选择器分为六种：

1、id选择器

2、class选择器

3、标签选择器

4、层级选择器（空格）

5、组合选择器（逗号）

6、属性选择器（中括号）

    
           Title    
       
        id选择器

View Code

    
           Title    
       
        class选择器

View Code

    
           Title    
       
  /*标签选择器*/

View Code

View Code

View Code

类选择器：给页面上的指定的类名的元素设置样式

伪类选择器：给页面上的元素设置样式，必须满足一定的条件，我们的伪类选择器

锚伪类

超级链接的不同状态

n 正常状态超级链接没有被访问 :link

n 访问过后状态超级链接已经被访问 :visited

n 鼠标放上状态鼠标放在超级链接上面，但是并没有将鼠标的左键按下去 :hover

n 激活状态鼠标左键已经按下去了，但是并没有将鼠标的左键弹出 :active

伪类选择器都是带有冒号“:”

注意：

超级链接的不同状态它其实是有顺序。也就是说锚伪类选择器设置其实是有顺序。

如果不按照伪类选择器的顺序，那么样式就会失效。

顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate”

超级链接的美化

我们通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。

一般情况下：

正常状态与访问过后的状态的样式设置为一样

当鼠标放上的时候给其设置另外一个颜色激活状态一般不会设置因为激活状态的时间太短

举例：

a:link,a:visited{去掉超级链接的下划线;设置一个颜色;}

a:hover{设置另外一个颜色;增加一张下划线;}

css属性操作:

颜色属性
       
        ppppp
       
       
        ppppp
       
       
        ppppp
       
       
        ppppp

View Code

字体属性font-size: 20px/50%/larger  font-family:'Lucida Bright'  font-weight: lighter/bold/border/                      #粗细  老男孩
    #斜体

View Code

背景属性background-color: cornflowerblue  background-image: url('1.jpg');  background-repeat: no-repeat;(repeat:平铺满)  background-position: right top（20px 20px）; ----简写----background: #ffffff url('1.png') no-repeat right top;

View Code

    
           test

View Code

    
           Title

View Code

文本属性font-size:        10px; text-align: center;        横向排列 line-height: 200px;        文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px       设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效 text-indent: 150px;        首行缩进letter-spacing: 10px;      字符于字符之间的距离word-spacing: 20px;        单词与单词之间的距离text-transform: capitalize;    单词首字母大写

View Code

文本属性演示:    
           文本        
       
        文本属性

View Code

边框属性border-style: solid;   border-color: chartreuse;   border-width: 20px; -----------简写--------------- border: 30px rebeccapurple solid;    
           文本

View Code

列表属性list-style-type         设置列表项标志的类型。list-style-image    将图象设置为列表项标志。list-style-position 设置列表中列表项标志的位置。  list-style          简写属性。用于把所有用于列表的属性设置于一个声明中  -------------------------------- #使用图像来替换列表项的标记: ul {     list-style-image: url('');            }    
           文本        
               
        123
        
        456
        
        789
    
       
    
               
        123
        
        456
        
        789

View Code

noneblockinlineinline-block  #none(隐藏某标签)  p{display:none;}  注意与visibility:hidden的区别：  visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。  display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。    #block(内联标签设置为块级标签)  span {display:block;}注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　    #inline(块级标签设置为内联标签)  li {display:inline;}    #inline-blockdisplay:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决    #outer{            border: 3px dashed;            word-spacing: -5px;        }    
           Title        
               
        span        
        a    
       
word-spacing 取消边距间隔

View Code

外边距(margine)和内边距(padding)margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。padding:           用于控制内容与边框之间的距离；  Border(边框):       围绕在内边距和内容外的边框。Content(内容):     盒子的内容，显示文本和图像。margine(外边距)单边外边距属性：    margin-top:100px;    margin-bottom:100px;    margin-right:50px;    margin-left:50px;  简写属性:------------------  margin:10px 20px 20px 10px；          上边距为10px        右边距为20px        下边距为20px        左边距为10px  margin:10px 20px 10px;          上边距为10px        左右边距为20px        下边距为10px  margin:10px 20px;          上下边距为10px        左右边距为20px  margin:25px;          所有的4个边距都是25px

View Code

float属性常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等     
           Title    
           
        
         box1
        
    
        
         box2
        
       
       
        footer

清除浮动

padding(内边距)

1、兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值2、父子div：if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；    
           Title    
       
          
        
   
        
       
>>>> 解决方法：overflow: hidden;

margin collapse（边界塌陷或者说边界重叠）

clear语法：clear : none | left | right | both取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许有浮动对象但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。    
           Title    
       
       
       
把握住两点：1、元素是从上到下、从左到右依次加载的。                 2、clear: left;对自身起作用，一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

清除浮动(推荐)

'''    .clearfix:after {             <----在类名为“clearfix”的元素内最后面加入内容；    content: ".";                 <----内容为“.”就是一个英文的句号而已。也可以不写。    display: block;               <----加入的这个元素转换为块级元素。    clear: both;                  <----清除左右两边浮动。    visibility: hidden;           <----可见度设为隐藏。注意它和display:none;是有区别的。                                       visibility:hidden;仍然占据空间，只是看不到而已；    line-height: 0;               <----行高为0；    height: 0;                    <----高度为0；    font-size:0;                  <----字体大小为0；    }        .clearfix { *zoom:1;}         <----这是针对于IE6的，因为IE6不支持:after伪类，这个神                                       奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
       
'''

解决父级塌陷

overflow:hidden

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

这些边框属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式

position(定位)a. static　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。b. position: relative／absolute　　 position: relative　　　　1. 参照物是元素之前文档流中的位置　　　　2. 元素不脱离文档流(之前的空间位置依然存在) 　　position: absolute　　　　　 　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素　　　　          那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框                     而不论原来它在正常流中生成何种类型的框。    
           Title    
           
        
    
        
    
        
    
        
       
relative absolute例子

position(定位)

    
           Title

常用设置

    
           Title

z-index

position: fixed;#右下角定位

inline #内联标签无法使用高度宽度

inline-block #内联可以使用高度宽度

line-height #内容高度

background-position #抠图

background:url(图片链接)

z-index #指定层级, 大的数在上面小的数在下面

响应式布局

before after伪类：

p:before 在每个

元素的内容之前插入内容 p:before{content:"hello";color:red}p:after 在每个

元素的内容之前插入内容 p:after{ content:"hello"；color:red}

CSS优先级:

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：       1 内联样式表的权值最高       style=""-------------------1000；　　 2 统计选择符中的ID属性个数。    #id    －－－－－－－－－－－－－100　　3 统计选择符中的CLASS属性个数。 .class  －－－－－－－－－－－－－10 4 统计选择符中的HTML标签名个数。     p     －－－－－－－－－－－－－-1

hover后加选择器#鼠标移动改变颜色


           
           title

内联inline-block标签独有的特性。

    
           Title

内联inline-block标签独有的特性。

实现尖角符号

    
           Title

图标,来源于 font-awesome

实现输入框最后有小图标

文字不会超过“zc”的位置，通过设置padding-right.

页面布局

    
           title        
       
        好好学习代码

!important优先级

按照CSS执行顺序来说，文字应该是绿色，但文字为红色，因为被后边的“!important”保护

实现模态对话框,可应用于刷新中图片展示功能,等

实现购物加减按钮

转载于:https://www.cnblogs.com/zcok168/p/9445941.html

你可能感兴趣的文章

3.8 采购协议管理

查看>>

[Hihocoder 1289] 403 Forbidden (微软2016校园招聘4月在线笔试)

查看>>

Revit二次开发之“取得所选元素的族名称”

查看>>

[04] 前端构建工具区别

查看>>

Python爬虫与一汽项目【三】爬取中国五矿集团采购平台

JavaScript 对象的遍历以及判断方法

查看>>

Object-C 入门介绍

查看>>

如何将github上源代码导入eclipse中

Flash Builder 4.7 类模板编辑设置

查看>>

九个Console命令，让js调试更简单

查看>>

【Paddy】数据库监控系列（一） - 监控理念

查看>>

mixin

查看>>

ios系统 ipa文件打包流程详解及常见问题处理

查看>>