ＣＳＳ| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第10天

1 css是什么？

层叠样式表，修饰网页结构

2 如何去使用css？

a.在html网页中，加入一个style标签，在这个style标签里面写css代码
b.可以直接把style里面的代码放到一个单独的文件中，通过link标签去引入 （常用）
c.直接在html开始标签的style属性里面去写css代码
以上三种方式都可以去设置网页都样式

3 css语法规则？要使得html标签有具体都样式，需要具备哪些条件？

a. style标签或者link标签或者style属性这几个都是写正确

b. 保证css代码和html代码产生关联，产生关联的方法有多种（id<==>#） 学习到底有多少方法可以关联html标签

c. 告诉浏览器要把html修饰成什么样子， 学习各种样式去修饰html标签

总结：css要学好，就是要学习两个东西：1 如何去关联（查找到对应html标签）2 如何去修饰这些标签

书写css的规则：

  选择器{
      属性名称:属性值；
      属性名2:属性值2；
      ....
      }

选择器：选择（查找）html标签的方法，（#box）

		  a.id选择器    #自定义一个名称
		  b.类选择器    .自定义一个名称
		  c.标签选择器   通过标签名称来选择对应的 html元素   
		  
总结：学习了以上三个选择器(找元素的方法)，就可以查找到网页中任何的元素

剩下要解决的问题：如何去修饰html元素？边框，颜色，字体，背景？
		  

4 具体的css规则

4.1 颜色的表示方式

a. rgb 模式 r 红色 g 绿色 b 蓝色 红绿蓝三原色可以组成n多颜色 rgb取值范围（0-255）

b. 直接写颜色的名称 如：red、green、blue、yellow等等

c. 十六进制 #9f0000 （最常用）

d. rgba(红色，绿，蓝，透明度) a的取值范围0-1 0表示完全透明 1 表示不透明

4.2 边框相关的属性

border-width  边框的宽度
border-style  边框风格        边框风格样式的属性值: 
none无边框  solid直线边框  dashed虚线边框   dotted点状边框 double双线边框

border-color  边框颜色

border：1px solid red； 简写形式
border-left 左边  border-right 右边  border-bottom 下边 border-top
border-radius 边框圆角

4.3 背景相关的属性

重复平铺满 repeat;

背景位置 background­position  横向（left,center,right）;  纵向（top,center,bottom  

背景相关属性

纵向（top,center,bottom 

background-color 背景颜色
    
background-image   背景图片
    
background-repeat  是否重复
                       向Y轴重复 repeat­y;
                       向X轴重复 repeat­x;
                       不重复 no­repeat; 
                       
background-position  背景位置
                         横向（left,center,right）;  
                         纵向（top,center,bottom)
                         
   background‐position：x y；        /*xy分别代表x轴位置和y轴位置*/

4.4 字体相关属性

    /*设置字体大小*/
    font-size: 80px;    
/*设置字体颜色*/
color: red;
/*字体加粗*/
/*font-weight: bold;*/
/*定义字体类型*/
font-family："微软雅黑"，serif;
    

font­family 定义字体，font­family：宋体，serif；可以使用“，”隔开，以确保当字体不存 在的时候直接使用下一个

4.5 文本相关属性

 text-align          text­align,横行排列，值：center 居中，left靠左，right 靠右
 text-indent        text­indent 首行缩进
 letter-spacing    letter­spacing 字符间距
 line-height          line­height 文本行高

总结：1 css是什么？css有什么用？ 2 css如何去使用？ 如何去找到对应html元素？如何去修饰这个元素？

   找元素的方法-->css的选择器（id 类 标签）
   掌握css的相关属性  颜色 边框 背景  文字 文本