前端-CSS学习

**

**实际的应用:
 1.去掉默认样式(用到的标签名都写上,逗号隔开)
     margin:0px;
     padding:0px;
   例:body,table,tr,td,div,dl,dt,dd,ul,li{
	margin:0px;
	padding:0px;
      }
 2:div居中:margin:0 auto;
 3:文字垂直居中:元素的高度(height)与行高(line-height)设成相同的值

一:网页布局的时候(命名代码规范)
   头部div取值为:id="header"
   中间div取值为:id="container"
      中间左部分div取值为:class="left"  
      中间中部分div取值为:class="middle"
      中间右部分div取值为:class="right"
   底部div取值为:id="footer"

二:样式表
  ①:行内样式:
      写在标签中,加style属性,在属性值中写样式
	<标签 style="属性:值;属性:值;">
  ②:内部样式:
      <style type="text/css">
           具体样式
      </style>
  ③:引用外部样式:
      <link rel="stylesheet" type="text/css" href="样式表文件.css" />
  样式形式的级别:
       行内样式 > 内部样式 > 外部样式

三:选择器(w3c规定:一个页面id不能重复)
  ①标签选择器
	选择器的位置是标签名
  ②类选择器
	以.开头
	引用时在标签中加 class="类样式的选择器名"
  ③id选择器
	以#开头
	先为控件添加id属性(一个页面id不能重复)
	再在style标签中为其添加样式 

  选择器的级别:
  id > class > 标签(样式冲突时)

①后代选择器:
选择器1 选择器2(空格隔开) 
②并集选择器
选择器1,选择器2(逗号隔开)
③交集选择器
选择器1选择器2(中间没有任何分隔)
	!!!!注意:在交集选择器中,选择器1必须是标签选择器,选择器2必须是类或id选择器

一:字体设置
1:字体样式
字体类型    font-family	 font-family:"隶书"(楷体);
           1.先设置英文字体,再设置中文字体2.每种字体逗号隔开3.字体类型中有空格或为中文,要加双引号
             如果浏览器不支持第一个字体,则会尝试下一个。
字体大小    font-size	 font-size:12px;(单位像素)
字体风格    font-style	 font-style:italic;
                         normal:默认  italic:倾斜体
字体的粗细font-weight	 font-weight:bold;
                         normal:标准  、bold:粗体字体  lighter:细体
在一个声明中设置所有字体属性(顺序字体风格-字体粗细-字体大小-类型)  font:italic bold 36px "宋体";

2:文本样式
1:颜色:color
  black  blue  green  red   gray  orange  purple  white yellow
   黑色  蓝色   绿色   红    灰色    橙      紫     白色   黄色
2:水平对齐方式:text-align
   left:左   right:右     center:居中   justify:两端对齐 
3:首行缩进:text-indent:2em  
4:行高:line-height:12px
5:文本添加修饰:text-decoration	 
    none:标准文本  underline:设置文本的下划线  overline:设置文本的上划线   
    line-through:设置文本的删除线    blink:设置文本的闪烁(IE无效)
6:垂直对齐方式(vertical-align:垂直方向对齐方式  top middle bottom   ——只对img标签起效)
    <p><img ......../>xxxxx</p>    p img{vertical-align:middle;}

二:超链接
 1:分类
             未单击访问前(a:link)
             鼠标悬浮在超链接上(a:hover)【必须设置在a:link和a:visited之后才有效】 
             单击未释放(a:active)【必须设置在a:hover之后才有效】
             单击访问后(a:visited)
  
 2:设置顺序:link->visited->hover->active
    注意:a:link 与a:visited:如果没有设置href属性,这两个将没有样式
 3:语法:
   标签名:伪类名{声明;}
    a:hover {
	color:#B46210;
	text-decoration:underline;
    }

2:设置鼠标形状:cursor   【span{cursor:pointer;}】
    default:默认 箭头
    pointer: 超链接的指针(小手)
    wait:指示程序正在忙()
    help:可用的帮助(箭头问好)
    text:指示文本(细I的形状)
    crosshair:呈现十字状
   
三:背景样式
 1:<div>:可将HTML文档分割成独立的,不同的部分,常用来进行网页的布局
    width:宽度(200px)height:高度(290px)
    <div id="iys2" style="width:180px ;height:180px;">   
    或
    #iys2{width:180px ;height:180px;
 2:背景属性
     ①背景颜色:background-color(值:red、yellow或#ff0000)
     ②背景图像
        背景图像:background-image:url(bg.jpg) 
        背景重复:background-repeat(repeat:水平垂直方向重复   repeat-x:水平方向重复 
                                   repeat-y:在垂直方向重复  no-repeat:背景图像仅显示一次              
        显示背景图像上的起始位置(基准的位置:左上方):background-position
                                  正(值)方向偏移的位置为:右下方
                                  负(负)方向偏移的位置为:左上方
                      1.只设置一个值:x轴为设定的值,y轴为居中
	              2.设置两个值:第一个是x轴,第二个是y轴	               
        简写背景样式:顺序(颜色 url 背景定位  背景重复方式)
 
四:列表样式
    list-style:none;去掉默认圆点
1:列表项标记的类型   list-style-type
       none:无标记符号
       disc:实心圆,默认类型
       circle:空心圆
       square:实心正方形
       decimal:数字
2:图像替换列表项的标记(设置它后list-style-type将不起作用)   list-style-image
      list-style-image:url(image/arrow-right.gif);
   注意:此设置网络的兼容性差,可用图片背景(加偏移量)代替
3:何处放置列表项标记   list-style-position
      inside:标记放置在文本(范围)以内
      outside:标记放置在文本以外
4:设置所有列表的属性 list-style
       顺序:list-style-type   list-style-position    list-style-image

五:盒子模型
   1:边框(第一层)
   2:元素内容及内边距(第二层)
   3:背景图(第三层)
   4:外边距  
   盒子模型的宽度=content(内容)+padding(填充:内容与边框之间)+border(内容的边框)+margin(两个内容之间的距离)
       
       
1:边框
   ①border-color:颜色
        属性	                  说明	            示例
       border-top-color 	上边框颜色	border-top-color:#369; 
       border-right-color	右边框颜色	border-right-color:#369; 
       border-bottom-color	下边框颜色	border-bottom-color:#fae45b; 
       border-left-color	左边框颜色	border-left-color:#efcd56; 
                  	    四个边框为同一颜色	border-color:#eeff34;
	                    上、下边框颜色:#369 左、右边框颜色:#000	border-color:#369 #000;            
      border-color          上边框颜色:#369左、右边框颜色:#000         border-color:#369 #000 #f00;                     	
	              上、右、下、左边框颜色:#369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;
   ②border-width:粗细
       thin  设置细的边框
       medium  默认值(设置中等的边框)
       thick  设置粗的边框
       像素值 自定义设置边框的宽度
          border-top-width:5px; 
          border-right-width:10px; 
          border-bottom-width:8px; 
          border-left-width:22px; 
          border-width:5px ; 
          border-width:20px 2px;
          border-width:5px 1px 6px;
          border-width:1px 3px 5px 2px;
   ③border-style:样式
         none:无边框
         dotted:点线边框
         dashed:虚线边框
         solid:实线边框
         double:双线边框
   ④简写(border):在一个声明中设置所有的边框属性
         border-top   border-right  border-bottom  border-left
          顺序为:width  style  color
2:外边距(与其他盒子之间的距离)
     属性
     margin-top:上边距
     margin-right:右边距
     margin-bottom:下边距
     margin-left:左边距
     margin
     
      示例
     auto:居中显示
     margin-top:  1 px
     margin-right :  2 px
     margin-bottom :  2 px
     margin-left :  1 px
     margin :3px 5px 7px 4px;  上、右、下、左边距
     margin :3px 5px;  上下3px  左右边距5px
     margin :3px 5px 7px;  上下为3和7;左右为5 
     margin :8px;  四个边距都是8px
     
3:内边距(内容与边框之间的距离)
     属性
     padding-left 
     padding-right
     padding-top
     padding-bottom
     padding
     示例
     padding-left:10px; 
     padding-right: 5px; 
     padding-top: 20px; 
     padding-bottom:8px; 
     padding:20px 5px 8px 10px ; 
     padding:10px 5px; 
     padding:30px 8px 10px ; :上下为30和10;左右为8
     padding:10px;
4:标准文档流(CSS默认的排列规则) 
    ①块级元素:以一块区域显示的元素(独占一行,拥有自己的区域)
         <ul><ol><dl><h1><p><div>
    ②内联元素:字母之间横向排列,到最右端自动拆行(没有自己的区域)
         <span><a><img><strong>
    ③内联标签可以包含在块级标签之中;但块级标签无法包含在内联标签之中
    ④display属性(控制元素的显示方式)
     
     
      值	     说明
    block	块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符
    inline	内联元素的默认值。元素会被显示为内联元素,该元素前后没有换行符 
    none	设置元素不会被显示

六:页面布局(131型、121型)
1:浮动  float属性(元素向哪个方向浮动)
     none:不浮动(默认值)
     left:向左浮动
     right:向右浮动
     设置了浮动后,该元素将会脱离标准文档流,盒子的元素将不再延伸,而是根据内容的宽度来确定,但不会脱离父标签的范围
2:清除浮动  clear属性(设置元素的哪一侧不允许有浮动元素)
     left:左侧不允许有浮动
     right:右侧不允许有浮动
     both:两侧均不允许有浮动
     none:两侧允许有浮动元素(默认值)
3:控制元素的大小(<div>)
     width:元素宽度
     height:元素高度
4:扩展盒子的高度
      因为盒子中的元素有了浮动,所以,盒子本身的高度可能就会变低,那么如果想让盒子的高度视觉上依然包含所有的元素,我们可以扩展盒子的高度。
      方法一:在盒子中元素的最下方添加空div,设置样式clear:both清除浮动
      方法二:在父级的标签设置中添加overflow属性为:hidden。
5:溢出处理
    就是将内容放到一个固定宽度和高度的盒子中,超出的部分隐藏起来或以带滚动条的窗口显示    
    owerflow属性
       visible:默认值,内容不会被修剪,会呈现在盒子之外
       hidden:内容会被修剪,并且其余的内容是不可见的
       scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
                            没有内容溢出的方向也会出现滚动条
       auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容
                            没有内容溢出的方向不会出现滚动条

七:定位机制
     标准流
     浮动
     绝对定位
 1:position属性:相对于父级的位置和相对于它自身该在的位置
     ①:static:默认值没有定位(元素按照标准流进行布局)
     ②:relative:相对定位(移动后的位置相对于原位置)(负数正方向/正数反方向)
         同时还要指定一定的偏移量,水平方向:left或right; 垂直方向:top或tottom
         元素移动之后,元素的大小并没有改变,原有的位置依然保留,其他的元素不受影响(不会被下面的其他的元素占用)
          #third {
	    background-color:#C5DECC;
	    border:1px #395E4F dashed;
	    position:relative;
	    right:20px;
	    bottom:30px;
          }
 
    ③:absolute:绝对定位
           使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。
           如果没有已经定位的祖先元素,那么会以浏览器窗口(右上)为基准进行定位。
           绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响。
           元素的某个边框相对于父级的某个边框的距离
           设置绝对定位,不设置偏移量,他将保持在原有的位置上(但依然脱离了文档流)
           元素定位之后,元素的大小将以内容的大小填充,原有的位置没有了,被其他的元素占用     
    ④:先浮动后定位
           相对定位,对浮动元素没有影响,并且继续执行相对定位 
           绝对定位,会让浮动元素失去浮动的效果,执行绝对定位       

 2:z-index属性:用于调整元素定位是重叠的上下位置(在设置了position的值的时候,他才有效)
     z-index的值越大,他的堆放位置越在上面





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值