CSS学习1-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

CSS学习1

简介: 一、层叠样式表的链接方式。  使用CSS层叠样式表可以很方便的设置所有的标签的属性 ,不用像以前一样我们对每个html标签逐个进行设置  。   在html中使用css有四种方式  。


一、层叠样式表的链接方式。
 使用CSS层叠样式表可以很方便的设置所有的标签的属性 ,不用像以前一样我们对每个html标签逐个进行设置  。
  在html中使用css有四种方式  。

 1、  行内样式   设置html标签的style属性 ,例如<body style="css样式"> 这样设置不能达到一次设置全部更新的效果  。

 2、   内嵌式     
    <style type="text/css">
     <--css层叠样式表样式-->
    </style>

 3、 链接式 利用<link type  rel  href="*.css">标签连接css    rel表示这个文件和当前文件的关系  。type是文件类型   必须放在head标签中这是一个规则,方便浏览器查找样式表 
   <link href="stylesheet/me.css" type="text/css" rel="stylesheet" />

  4、导入方式   url可写可不写 ,但是;必须写要不然会出错误.这个导入方式可以把多个css文件导入到一个css文件中但是最好不要这样做,众多网站设计师的经验。
    我们在制作网站的时候最好用link方式 。
   <style type="text/css">
    @import  url("stylesheet/me.css"); 
   </style>

二、css选择器  css类别选择器,对于标记进行分类设置样式   id选择器(只能出现一次js)
 
   ul可以嵌套使用 
   strong 加强黑体显示  em加强斜体显示
 
   p b{}    表示p标记中包含的b标记的样式

   p.astyle{}表示p标记的类别选择器为astyle的标签的样式     也就是class属性
  
   p,b,h1{} 表示这几个标签样式是一样的,所以我们可以放在一起设置中间用,隔开。   同时对多个元素设置css样式

   如果一个标记包含在另一个标记的里面 那么它会首先继承外面的标记的css样式设置 。如果内部标记自己设置样式 那么会覆盖父标记的样式。

   .class{}     #id{}    a{}  

三、 span标签可以放在div或者p中使用.在div中嵌套span可以设置部分的样式。

     font-family:  黑体,幼圆,楷体;  设置字体 如果系统中有黑体那么用黑体如果没有黑体那么用幼圆  ,如果都没有那么使用浏览器默认字体  
    
     font-size:10px; 
    
     pt是印刷业上常使用的单位,磅的意思.一般也用于页面打印排版. 
     如果使用em来指定填充,填充的宽度是相对于DIV元素的字体大小而定的.
     px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. 
     mm  毫米  
     cm 厘米 
   
     color 设置字体的颜色  

     font-weight 设置文字的粗细的 。 

     font-style 设置字体风格 
              normal : 正常的字体
              italic : 斜体。对于没有斜体变量的特殊字体,将应用oblique
              oblique : 倾斜的字体 

     font-decoration  设置字体的下划线也就是装饰  
          none :  无装饰
          blink :  闪烁    IE貌似不支持
          underline :  下划线
          line-through :  贯穿线
          overline :  上划线
     text-transform : 大小写转换  
        none :  无转换发生
        capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
        uppercase :  转换成大写
        lowercase :  转换成小写
      letter-spacing  字符间距  允许负数 px  


   vertical-align   文本的垂直方向对齐方式 
   ruby-align  水平对齐方式
   
   float:left可以实现文本的首字下沉的效果  第一个字必须必其他的大小要大
   padding-right 设置对象四周的边界  例如表格中的文字 
 

      

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章