WEB前端css

css样式功能的概括

 css样式的大概分类：

     1尺寸类：宽高 边框 内边距

     2外观类：文本（字体大小，字体，字体样式）背景（背景颜色，背景图片背景图片定位，大小

     3位置类：外边距，定位，浮动

     4其他样式....

css颜色设置的几种设置

   1颜色设置的设置方法

      颜色单词：red(红色) blue(蓝色).....

     rgb(0~255,0~255，0~255)三原色  红色：rgb（255，0，0）

     十六进制颜色设置 #f00红色  #0f0绿色  #00f蓝色

     rgba(0~255,0~255,0~255，0~1)设置当前样色是否透明 0表示透明1表示不透明

font字体设置以及font连写

   字体加粗：font-weight：100~900没有单位 100~500不加粗  600~900加粗

   字体大小：（浏览器默认的字体大小是16px）font-size：px

   字体倾斜：font-style：normal italic

   字体：font-family：字体名称   可以写英文名称也可以写中文名称

   font连写：font：weight style size family （连写中必须写size属性和family属性）

css的书写位置

    1内嵌式：（实际开发不常用）

                 当前html文件中，写在head中，定义style标签 style中定义css代码（没有实现样式与结                   构分离）

    2行内式：（不建议使用）

                 在标签内使用style内定义css代码  只能有一个属性

   3外链式：（实际开发中常用）

                link引入  单独定义css文件，在css文件中写css代码（实现样式与结构分离）

几种选择器

   1标签选择器：直接写标签名作为选择器的名称

   2类选择器：在标签中定义class=“”   书写格式.(class名)

   3id选择器：设置id名    #(id名)   id选择器>类选择器

   4通配符选择器：*  所有都被选中

   5后代选择器：用空格隔开 可以选中父元素中的所有子元素  子孙后代都可以

   6并集选择器：用，号隔开   选中什么和什么 可以理解为和

   7子代选择器：用>隔开 只能选中父元素中的亲儿子元素

   8交集选择器：既是什么选择器又是什么选择器

元素分类及显示模式转换

    块级元素：特点 独占一行，可以设置宽高 常见有p,h1~h6,ul>li,oi>li,dd等

    行内元素：特点 在一行显示，不可以设置宽高 常见有span，a，等

    行内块元素：特点  在一行显示，可以设置宽高  input  img

显示模式转换

    display=inline 转换为行内元素

    display=block 转换为行内元素

    display=inline-block 转换为行内块元素

css三大特性

 层叠性

   样式叠加而来，最后共同生效 这就是层叠性

继承性

   部分样式设置给父元素，子元素也会生效该样式 

   文本样式会被继承：color，font 其他不会被继承

   h系列标签不要继承字体大小，否则会变比父元素还大

           因为h系列标签默认的字体大小单位是em 是按照父元素大小来确定的

  a标签不会被继承字颜色：a标签是多个伪类选择器组成

                                            给a标签增加字体颜色 要选择器直接选中a

 优先级

     标签选择器<类选择器<id选择器<行内选择器<!important

  权重性叠加：

继承的权重值为0