css个人总结

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

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

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

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

        <p class="two"></p><p class="two"></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

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有