CSS常见样式

CSS常见样式

这个章节主要是对CSS的统一性进行一个讲解，在CSS里面使用统一的CSS属性名去设置全部的HTML标签。现在我们就把这些常见的属性拿出来和大家一起学习

宽度高度相关

1. width/height设置元素的宽度与高度，它们的宽度与高度是固定的
2. min-width/min-height设置元素的最小宽度/最小高度，元素的实际宽度与高度可以大于等于这个值
3. max-width/max-height设置元素的最大宽度/最大高度，元素的实际宽度与高度应该小于或等于这个值

max-width/max-height/min-width/min-height这四个属性在低版本的IE6里面不能使用

颜色相关

在CSS里面，与颜色相关的有很多，目前这个环境，我们只考虑前景色（文字颜色），文字颜色我们只要使用的属性是color属性。这个属性没有什么好讲，关键在于颜色值的类型

在CSS里面，常用的颜色值有四种类型

第一种颜色值：枚举色

color:red;
color:blue;
color:deeppink;

这一种颜色值最为直观，它可以将一些见的颜色列举出来，但它有一个缺点就是能将一些常用的颜色列举出来，并且这些颜色值都很抽象

在枚举色里面，有一个特殊的颜色，它也可以表示透明，使用transparent来表示

color: transparent;

第二种颜色值：16进制色

16进制色是在计算机里面使用16进制的数值去表示一个颜色值，它使用#开头,后面跟6位值，后面使用0_9，AF的值进行表示，如#000000这就是一个颜色，后面的值分为三个部分。格式是#红色绿色蓝色

color:#ececec;
color:#FF0000;
color:#808080;
color:#FFFFFF;	/*白色*/
color:#000000;  /*黑色*/

• 前面的FF代表的是红色的值
• 中间的22代表的是绿色的值
• 后边的00代表的是蓝色的值

红绿蓝三种颜色可以构成世间的所有颜色，所以我们分别把这三种颜色的值从00开始，到FF结束

这种颜色值优越非常大，它可以通过具体的数值去描述一个颜色，因为数值不可能出错，所以颜色效果也不会出错，一般在开发过程当中我们通常会使用这一种颜色来进行标记

第三种颜色值：RGB三元色

这一种颜色对应也是上面的16进制色，R代表的是红色red，G代表的是绿色green,B代表的是蓝色，每个颜色的值是从0~255之间，它的格式是rgb(红色,绿色,蓝色)

color: rgb(255,0,0);	  /*红色*/
color: rgb(125,125,125);  /*灰色*/
color: rgb(255,255,255);  /*白色*/
color: rgb(0,0,0);		  /*黑色*/

这一种颜色多半使用在UI设计师的设计稿里

第四种颜色值：RGBA颜色

这一种与第三种颜色相似，只是对当前的颜色添加一个透明值，这个透明值是0~1之间，0代表的是全透明，1代表全不透明，它的格式是rgba(红色,绿色,蓝色,透明度)

color: rgba(255,0,0,0.9);

?注意： rgba的IE 9及以上才能够使用

背景

以背景相关的属性基本上都会以background来开头，它可以设置背景颜色 ，也可以设置背景图片

1. background-color设置元素的背景颜色

2. background-image设置元素的背景图片，后面一个图片的url地址

   background-image:url(./img/item3.jpg);
   

3. background-repeat设置背景的重复平铺行为

   当一个背景图片小于这个容器的时候，我们就会发现这个图片在这里会出现水平方向与垂直方向的重复平铺行为，要控制这种平铺行为，则要设置当前的属性，它个属性有以下几个属性值

   • repeat在水平方向与垂直方向去进行重复平铺
   • repeat-x只设置水平方向发生重复平铺
   • repeat-y只设置垂直方向发生重复平铺
   • no-repeat水平方向与垂直方向都不发生重复平铺（禁用重复平铺行为）

   其实这个属性还可以进一下拆分，它可以拆分成background-repeat-x与background-repeat-y

4. background-size设置背景图片的大小，它的值根据不同的类型决定不同的效果

   设置1个值

   background-size:150px;	
   /*
   	这个时候我们只设置了一个值，这个值设置在了图片的宽度上面，高度自动的等比例缩放
   */
   

   设置2个值

   background-size: 120px 150px;
   background-size: 100% 100%;
   /*
   	这个时候我们设置了二个值，第一个值代表背景图片的宽度，第二值代表背景图片的高度
   */
   

   设置contain属性值

   background-size: contain;
   

   盒子要完全包裹住背景图片的同时，图片要以最大姿态展示出来，这样就有可能会发生某一个方向会存在一定的空白

   第一种情况	第二种情况

   设置cover属性值

   图片以等比例缩放，直到完全覆盖住盒子，这样图片会在某一个方向发生一个截取的行为（图片会在某一个方向显示不全）

5. background-position设置背景图片的定位，它可以设置两个值，第一个值代表距离水平的位置，第二个值代表垂直的位置

   background-position: 10px 20px;
   /*背景图片距离左边10个像素，距离上边20个像素*/
   

   它也可以使用枚举值，水平方向的属性的枚举值为left/center/right，垂直方向的枚举值为top/center/bottom

   background-position: center top;
   background-position:  left center;
   

6. background属性，它是一个综合属性，可以同时设置背景颜色，背景图片，背景平铺等属性

   background 是一种 CSS 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。

   background: lightblue;		/*设置背景颜色*/
   

   设置背景图片

   background: url(./img/1.jpg)  no-repeat center center;
   

👉 扩展：多背景图设置

在一个盒子里面可以同时设置多个图片

background: url(./img/icon.png) no-repeat,
			url(./img/wall.jpg) right top no-repeat ,
			url(img/item3.jpg);

但是要注意，背景图片的加载顺序是从右向左来进行的，在上面的代码里面，第一次加载item3.jpg图片，第二次加载wall.jpg图片，第三次加载icon.png图片

思考：多背景图是否可以分开来设置，不直接使用background

background-image:
                url(./img/icon.png),
                url(img/wall.jpg),
                url(./img/item3.jpg);

background-repeat: no-repeat;

background-position:
                left top,
                right top,
                left top;

字体与文字

在这个章节里面，所有与字体相关的则是以font开头，所有与文字相关的基本上则以text开头

1. font-family设置字体的类型 ，相当于之前学习的font标签里面face属性

   font-family: "microsoft yahei",Arial, Helvetica, sans-serif;
   

   它会按照我们的加载顺序依次的去当前电脑上面找字体，如果找到了字体就使用，如果没有找到字体，则找第二个，第三个…一直往后面找，直接找到为止

2. font-size设置字体的大小

   字体的单位有很多，主要的单位则有以下几个

   • px像素单位，网页默认的字体大小是16px

   • pt字号单位，网页默认的字号大小是12pt

   • vw响应式单位，全称叫viewport width

   • vh响应式单位，全称叫viewport height

   • rem响应式单位，全称叫root element，网页当中的根元素是html元素，所以

     1rem就相当于一个html里面的字体大小，而html里面的默认字体大小是16px

     默认情况下1rem=16px

   在以谷歌为核心的浏览器里面，最小字体只能设置为12px

3. 自定义字体@font-face

   /* 定义好自定义的字体 */
   @font-face{
       font-family: "biaogege";
       src: url(./fonts/hksn.ttf);
   }
    .p1{
        font-size: 36px;
        /* 使用刚刚定义好的字体 */
        font-family: "biaogege";
   }
   

4. font-weight设置字体的权重值

   • lighter把字体设置得更细一点
   • bold把字体设置得粗一点
   • bolder把字体设置得更粗一点
   • normal把字体设置得正常化

   除了使用上面的字四枚举值以外，还可以设置100~900之间的值，400代表的是normal，300代表的是lighter，700代表的是bold

5. font-style设置字体的样式

   • italic设置字体为斜体字
   • oblique也可以字体为斜体字

   这两个属性都可以将文字表现为斜体，但是有不同的本质区别

   italic是先判断一下当前这个字体类型有没有斜体字，如果有斜字体，则使用斜体字，如果没有斜体字，转而会使用oblique,直接将整个文字倾斜

6. text-align设置文字的水平排列方式，它使用left/center/right这三种方式，其中还有一个属性值justify我们在后面讲完元素类型以后再给大家去讲

7. text-decoration设置文字的描述信息，它是一个简写的属性

   • text-decoration-line
     • underline下划线
     • overline上划线
     • line-throuth中间线（删除线）
   • text-decoration-style
     • solide代表实线
     • dashed代表虚线
     • dotted代表点线
     • double代表双线
     • wavy代表波浪线
   • text-decoration-color

   text-decoration-line: underline;
   text-decoration-color: red;
   text-decoration-style: solid;
   

   上面的属性可以简写为text-decoration

   text-decoration: underline red wavy;
   

   上面三个属性值的位置可以发生更改

8. text-indent文字首行缩进

   text-indent:2em;   
   

9. text-transform英文字的大小写变换

   • uppercase大写字母
   • lowercase小写字母
   • capitalize首字母变成大写

10. text-shadow文字阴影

    这个属性它接收四个值，如下所示

    text-shadow:水平偏移 垂直偏移 阴影模糊度 阴影颜色;
    

    水平偏移与垂直偏移的时候，记住“左负右下，上负下正”这个口诀

    text-shadow:5px 7px 5px red;
    

11. letter-spacing设置汉字或英文字母间的间距

12. word-spacing设置英文单词之间的间距（对中文无效）

13. line-height设置文字的行高

    line-height:1.7;   /*原来行高的1.7倍*/
    line-height:1.7em; /*当前字体大小的1.7*/
    line-height:50px;
    

    👿 小技巧：如果在一个元素里面，只有一行文字，那么行高与高度相等，则这一行文字就会上下居中

14. 文字溢出处理

    .div1{
        width: 200px;
        height: 100px;
        border: 1px solid red;
        /* 第一步：文字不换行 */
        white-space: nowrap;
        /* 第二步：给盒子添加溢出隐藏 */
        overflow: hidden;
        /* 第三步：如果是文字溢出了，则给一个省略号 */
        text-overflow: ellipsis;
    }
    

    这个时候文字如果溢出了就显示一个省略号

    

边框

border

在CSS里在，边框只有一个属性叫border,这个属性接收三个属性值，语法格式如下

border:边框粗细 边框类型 边框颜色;

如下

border:1px solid red;

在设置边框的时候，我们是同时在设置四个方法的边框，但是我们也可以分别去设置不同的方向的边框

• border-left左边框
• border-right右边框
• border-top上边框
• border-bottom下边框

我们不仅可以设置四个方法还可以分别去设置它的border的三个值

• border-width设置边框的线条粗细
• border-style设置边框的类型 ，常见的类型有如下几种
  • solid实现
  • dashed虚线
  • dotted点线
  • double双线
  • groove凹槽线
• border-color设置边框的颜色

这三个属性可以跟上面的四个方法进行一个结合，如下所示

border-top-color: black;
border-bottom-width: 5px;
border-left-style: double;

它可以设置任意一个方向的任意一个属性

扩展：在上面的图里面，我们会看到有一个特殊的颜色值叫currentColor，它是CSS里面的一个特殊标识量，代表当前元素的color的颜色

.div1{
    color:blue;
    border:5px solid currentColor;
}

这个时候currentColor代表的就是当前元素color属性的颜色，在这里也就是blue

border-image

圆角边框

这个属性可以将元素的四个角设置成圆角，它可以分开设置，也可以批量设置，接收1~8个值

border-radius:20px;

这个时候四个角就会变成一个圆角，它是以半径20px在四个角上面进行圆行裁剪，这个值越大，圆角越明显，如果这个值是当前正文形的一半，则会变成一个圆形

.div1 {
    width: 200px;
    height: 200px;
    background-color: deeppink;
    border-radius: 100px;
}

border-radius也可以分别设置不同的角，根据所赋值的个数不同，代表的意义也不相同

border-radius:10px;		/*代表四个角都是10px*/
border-radius:10px 20px;	/*第一个角10px，第二个角20px，第三个角没有赋值参照对角，第四个角没有赋值也参照对角*/
border-radius: 10px 20px 30px; /*第一个角10px，第二个角20px，第三个角30px，第四角没有赋值参照对角*/
border-radius: 10px 20px 30px 50px;  /*四个角一边一个*/

border-radius的赋值顺序是从左上角开始，按顺时针的顺序绕一圈，有值就赋值，没值就参照对象

同样的这四个角也可以分开来进行设置，只对某一个角进行设置

• border-top-left-radius左上角
• border-top-right-radius右上角
• border-bottom-right-radius右下角
• border-bottom-left-radius左下角

? 注意 在这里请一定一定要注意，它的方法是与我们理解的方法有点误差的

---

上面我们讲过border-radius这个属性接收1~8个值，现在我们怎么设置也只有四个值，这是为什么呢？还有四个值在哪里呢？

在真正设置圆角的时候，其实圆是有两个半径，分别是横轴半径与纵轴半径，如果这两个半径相同则是一个圆，如果这两个半径不相同，则是一个半径

border-radius:150px;
/*其实就是这下这种写法的简写*/
border-radius: 150px / 150px;		/*前面的150px代表横轴半径，后面的150代表纵轴半径*/

所以根据上面的赋值规则它其实是有8个值的，如下

border-radius:左上横轴 右上横轴 右下横轴 左下横轴 / 左上纵轴  右上纵轴 右下纵轴 左下纵轴;

溢出处理

溢出原本的意思是一个小的容器里面盛放了一个比较大的东西，这个时候它就需要使用一种特殊的技术去处理它 的这种现象

处理溢出主要使用的属性就是overflow来进行，它有以下几个常用的属性值

1. hidden溢出隐藏，溢出的部分把它隐藏掉
2. visible溢出显示，溢出的部分正常的显示出来
3. scroll溢出滚动，如果溢出了，则添加一个滚动条
4. auto自动处理，它会根据外部元素的大小，自动处理，如果外部元素小于内部元素发生了溢出的现象，则会添加滚动条，否则则不添加

其实overflow属性还可以分开设置不同的方向，它使用overflow-x与overflow-y来进行

表格样式

表格有自己的一套样式，之前在HTML的学习里面我们主要使用的是属性来设置样式，现在在CSS里面，规范Web结构代码，就不能继续使用HTML的样式属性了，转而要使用CSS属性

1. 添加表格边框

   .table1,.table1 tr>*{
       border: 1px solid black;
   }
   

2. 设置单元格之间的间距

   在以前的HTML的Table标签里面，有一个属性叫cellspacing，它是设置单元格之间的间距的，如cellspcing="10"，这个时候在CSS里面则要使用下面的方式来设置

   .table1{
       border-spacing:10px;	/*单元格之间间距为10px*/
   }
   

   如果想要让border-spacing这个属性生效，则必须设置border-collapse:separate

3. 设置单元格之间间距模式

   上面通过cellspacing确实可以设置单元格间距，在CSS里面也可以通过border-spacing设置单元格间距，但是如果想去掉单元格间距，则在CSS里面要这么设置

   .table1{
     	border-collapse: collapse;
   }
   

4. 设置单元格的内容水平排列，之前在HTML里面设置的是align属性，现在在CSS里面设置的是text-align

5. 设置单元格的内容垂直排列，之前在HTML里面设置的是valign属性，现在在CSS里面设置vertical-align。它所接收的属性值仍然是top/middle/bottom

   .table1 tr {
       vertical-glian:top;
   }
   

列表样式

有了CSS以后，之前所学习的ul与ol标签就没有什么太大的区别了

1. list-style-type设置每一项列表前面的符号，它常见的属性值如下

   • none取消前面的列表项符号

   • decimal数字

   • decimal-leading-zero以0开始的数字

   • disc/circle/squre与之前的保持一致，分别是实心圆，空心圆，实心矩形

   • cjk-earthly-branch采用古代十二个地支表示“子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥”

   • cjk-heavenly-stem采用古代十个天干表示“甲、乙、丙、丁、戊、己、庚、辛、壬、癸”

   • lower-alpha 小写字母

   • upper-alpha大写字母

2. list-style-position设置样式的位置，它有两个属性值

   • outside，列表样式在盒子模型content内容外部
   • inside，列表样式在盒子模型content内容内部

3. list-style-image使用图片去代表列表项里面的每一个符号

   list-style-image:url(./img/01.png);
   

计数器

1. counter-reset重置一个计数器，并设置这个计数器的初始值，计数器初始值是0

   .f1{
       /* 定义（重置）一个计数器aaa ，初始值10*/
       counter-reset: aaa 10;
   }
   

2. counter-increment设置计数器的增量，增量默读值是1

   .f1>p{
       /*在p元素上面设置aaa计数器的增量是5*/
       counter-increment:aaa 5;
   }
   

3. counter(计数器名称)从计数器里面拿出当前的值

   .f1>p::before{
       /*从计数器aaa里面拿出当前元素的值，然后插入到::before的位置*/
       content: counter(aaa);
   }
   

上面的三个属性就是计数器的属性，它们在设置的时候分别设置在了不同的地方，但总体而言记下下面的规律则可

• 我要对哪个元素记数，就将counter-reset设置在这个元素的外层
• 我要对哪个元素记数，就将counter-increment设置在这个元素上面
• 我要对哪个元素记数，就将counter(计数器名)设置在这个元素的::before或::after上面