Css

最新推荐文章于 2024-01-15 15:51:35 发布

gdl116929569

最新推荐文章于 2024-01-15 15:51:35 发布

阅读量308

点赞数

分类专栏： HTML/CSS

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS概念
Cascading Style Sheet
CSS版本:CSS1，CSS2，CSS2.1,CSS3.0

CSS功能
控制HTML页面的显示效果

CSS语法
选择器 {
CSS属性:值;
CSS属性:值;
}

CSS引入页面的方式
1.内联样式
通过HTML的元素的style属性引入CSS
<h1 style="color:red;">Web主页</h1>
无选择器，只针对当前的元素。

2.内嵌样式CSS
在HTML页面中使用<style>引入。
一般放置在<head>内。
<style type="text/css">

  h1{color:red;}  
  div {

  }
</style>

3.外联样式
将CSS代码存放在单独的CSS文件中。
<link rel="stylesheet" type="text/css" href="../css/main.css">

CSS选择器(selectors)
选择要作用的HTML元素
1.标记选择器
   标记名 {   }
   h1{color:red;}  
   div { }
   body { color:blue;}

2.ID选择器
   #id {}
   <div id="top">
   #top {}

3.类选择器
  <div id="left" class="navline">

</div>
 语法：  .classname {}
 案例：
   .navline {}

4.所有元素选择器
   * {      }

5.组合选择器
   选择器选择器 { }
   div.navline {}
   div#top {}

5.子元素选择器
   语法：选择器 选择器 选择器 {}
   案例
   div ul li a  {}

6.平行选择器
    语法：
    选择器,选择器,选择器{  }
    满足任何一个选择器均可
   案例：
   div#top,div.navline {}
7.直接子元素选择器
   选择器>选择器>选择器 {}

   div>ul>li>a {}
8.属性选择器
   语法: [属性名] {}
            [属性名="值"] {}
            [属性名^="值"] {} 以值开头的属性
            [属性名$="值"] {}  以值结尾的属性
            [属性名*="值"] {}  包含值的属性


   案例：
    [class] {}
    div[class] {}
    input[type="radio"] {}
    a[href^="http://"] {}
    a[href*="#"] {}


9.常用的伪类选择器
文字伪类：
:first-letter
:first-line
元素伪类：
:first-child
超链接伪类：
a:link
a:visited
a:hover
a:active:
表单元素伪类：
:focus
案例：input[type="text"]:focus {}

CSS属性分类
1.文字样式属性
2.块（box）元素的样式属性
3.布局样式
4.位置样式属性
5.列表的样式属性
6.超链接的样式属性

文字样式属性
1.color 文本属性
取值：单词 red，blue等
          #999 #999999 十六进制颜色编码
          rgb(100,100,200); 红，绿，蓝编码，每个0-255.
如: h1 { color:red;}
     h2 {color:#999;}
     h3 {color:rgb(10,20,20);}
2.font-size 字体大小
取值：Small，medium，large…或直接指定字体大小

3. font-family 字体 如宋体，仿宋等
Arial，serif，宋体
4. text-align 文字的横向位置
取值:left, right, center, justify
    div#top {text-align:center;}

5.font-style 字体的样式，如标准，斜体等
取值：normal, italic…

6.font-weight 字体的粗细
取值：normal, bold, lighter, 100, 200…

7. text-decoration 文本的修饰
取值:
none, blink, underline, overline, line-through
8. text-transform 文本的转换
取值：none, capitalize, uppercase, lowercase
9. vertical-align 纵向位置
取值：baseline, super, sub, top, text-top, middle-bottom, text-bottom

10. word-spacing 单词的间距大小
取值：度量， 如10px, 1.5em.
11. letter-spacing 字符的间距大小吗，取值px点阵或比例em.
度量

HTML元素的显示模型（Box Mode）
1.HTML元素的显示特性：
(1)块元素：Block Element: 在新的一行显示。
body, div，h1，h6，ul，li，p，table
(2)行元素：不在新的一行显示
a, span, b ,i
2.块元素按盒模型进行站位和显示
(1) 外边距（margin）：
(2)边框（border）
(3)内边距(padding)
(4) 内容的长度和高度

块元素样式属性
1.控制外边界的属性
   margin:10px;
   margin-left:5px;
   margin-right:1px;
   margin-bottom:2px;
   margin-top: 4px;
   margin:1px 2px 3px 4px;
2. 控制内边距：
   padding:10px;
   padding-left:5px;
   padding-right:1px;
   padding-bottom:2px;
   padding-top: 4px;
   padding:1px 2px 3px 4px;
3.控制边框属性
border:solid 20px red;
border-style: solid;
border-width:5px;
border-color:#aaa;
border-left-style:
border-right-style:

4.控制块元素内容样式属性：
   width 控制宽度，height:控制高度
  width:60px; 50%,
  height:200px

5.背景颜色
background-color:颜色;


6.背景图片
(1)设置背景图片：
background-image:url(images/tu1.jpg);

div#main {
}
(2)设置背景是否平铺：
background-repeat:repeat;
取值：repeat, repeat-x, repeat-y, no-repeat
(3)设置背景图片的位置
background-position:x y;
x取值：left,center,right,%, px
y取值：top,center,bottom,%,px

列表样式属性
list-style-type: square
取值:circle,none.
list-style:none;

布局属性
1.float: 块元素浮动属性
   取值：left,right,none
  案例：div#left {float:left;}

2.clear: 清除float
取值：left，right，both。
案例: div#footer { clear:both}

3.display: 块元素和行元素的转换属性
取值:
   inline: 块元素按行元素显示
   block: 将行元素按块元素显示。