你的位置:首页 > 网页设计

[网页设计]css个人总结


1.什么是css,指的是叠层样式表,控制网页的的外观显示。

2.引入css的三种方式,外部链接,内部链接,内联,分别的语法是,<link rel="stylesheec" type="text/css" href=""/>,<style type="tex/css"></style>,

3.css选择器,选择器就是要针对你要所改变的元素,而单独定义的样式,就常见的选择器:ID,CLASS,元素选择器,子元素选择器,群组选择器,相邻选择器,id选择器是唯一的意思是,只能定义一个id名相同的,class选择器,类选择器,可以为多个元素定义,id选择器和class选择器的区别在于,id是唯一的就像每个人的身份证一样只有一份号码是唯一的,而class就是像每个人的名字一样可以重复,元素选择器就是选泽要改变的元素标签名字,子选择器就是在当前元素后的子元素,群组合选择器就是选泽所有想改变的元素,相邻选择器就在当前同级元素的下一个元素。

语法:<p id="one">这是一个段落</p>  相应的  css规则: #id{ 属性:值}

        <p ></p><p ></p>相应的css规则:.class{ 属性:值}

        <p>这是一个段落</P> 相应的css规则:p{属性:值}

       <div><p>这是一个段落奥</P></div>相应的css规则:div p{属性:值}

      <div><p>这是一个段落奥</P></div>相应的css规则:div,p{属性:值}

    <div>

<p>这是一个段落奥</P>相应的css规则:div+div{属性:值}

  </div>

  <div>

<p>这是一个段落奥</P>

  </div>

4.字体样式

字体的类型:font-family:  '';取值宋体,微软雅黑等、

字体的大小:font-size:;通常以像素值px,其他的还有em ,百分比

字体的粗细:font-weight:;取值bold粗体显示,normal正常

字体的样式:font-style:;italic斜体,normal正常

颜色;color;

行高:line-height:;字体的行高,一行的高度不是距离。

5.文本样式

文本装饰:text-decoration:;取值有,line-through(贯穿线),underline(下划线),overline(上划线)

文本对齐:text-align:;取值有,center(居中),left(左对齐),right(右对齐)

文本缩进:text-ident:;取值单位px.em,百分比

文本大小写:text-transform:;取值有 uppercase(大写) lowercase(小写) capitalize(首指母大写)

文本的字间距:letter-sapcing:;取值单位px ,em ,百分比

词间距:word-sapcing:;取值单位px ,em ,百分比

6.边框

border边框 边框的大小 类型 颜色 分别的设置

border-width:; 取值是单位px   em  百分比

border-style:; 取值是solid 实线  dashed虚线 等

border-color:;取值颜色 ,可以是十六进制。

7.背景 

背景图片,背景是否被重复 ,背景的位置,背景是否滚动  分别是

background:URL; 

background-repeat:;取值有,repeat(重复) no-repeat(不重复) repeat-x(x轴重复) repeat-y(y轴重复)

background-position:;取值可以是   center left right top

background-scroll:;  取值是scroll   fixed

 

可以简写;background: URL  repeat   position  scroll;

 

 

8.超链接样式

当我们鼠标移动到a标签上面,可以让他显示的样式,通过伪类来设置,不一定是a元素才有可以设置,在html中 任何元素可以都已设置伪类。语法:元素:hover

当鼠标未访问的样式a:link;,当鼠标访问后的样式a:visited;当鼠标移动到的样式a:hover;当鼠标按下时的样式a:active;

9图片

图片大小:可以通过设置它的宽度 高度来设置。

图片位置:通过text-align(水平居中),vertical-aligin(垂直居中)

图片边框:通过border来设置它的边框

10列表

列表的样式:list-style-type:;取值none,circle,等

列表图片:list-style-image:;

11表格

表格默认是没有边框的,我要通过border给它值

12,盒子模型

盒子模型分为:内容区,内边距,外边距,边框

13布局

浮动布局:通过float浮动块元素,注意清除浮动。

定位布局:position来设置。然后设置。上右下左的值。

固定定位:position:fixed/scroll

静态定位:position:static