css笔记第一天

一、 选择器{样式} 

        小写字母书写  属性和属性值中间、选择器和大括号之间都要有一个空格

 二、基础选择器：标签选择器（所有标签都被改变） 

    类选择器：class属性 (样式点定义  结构类（class）多个标签都可用)

三：emmet 语法 提高编写 html/css的速度

 1、生成标签 输入标签点tab

2、生成多个标签  标签*数字

3、生成父子级别   标签>标签 

4、生成兄弟级别   标签+标签 

5、生成带有类名或id名的，直接写.demo 或 #id tab 即可

6、生成有序的，用$

7、生成标签内部写有内容可以用{}表示

   class选择器可多次使用  

   id选择器只能用一次

快速格式化代码

复合选择器

  1、 后代选择器：空格  元素1  元素2 { } 元素2是元素1的后代

   ol li {  } 改变的是li的样式，

2、 子选择器  >定义   元素1>元素2{ } 元素1 是元素2的父级 

      选择作为某元素的最近一级子元素

  3、 并集选择器 

      元素1，元素2,元素3{ }

  4、伪类选择器

     用 ： 表示 {按照LVHA 即 link visited hover  active 的顺序写。}

     a:link   未访问过的链接样式

     a：visited 点击过以后的链接样式

     a:hover   鼠标经过链接显示的样式

     a:active 鼠标点击的那一刻链接显示的样式  

     focus伪类选择器 

     选取获得焦点的表单元素

     input:focus{

     background-color: cornflowerblue;

     }

     css的元素显示模式

     html 元素一般分为块元素和行内元素两种类型

     块元素有：<h1>~<h6>、<div>、<p>、<ul>、<li>等 自己独占一行

     文字类元素不能使用块级元素  <p>和<h1>标签里面不允许放<div>

   

     行内元素：（也称内联元素）<a>、<strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等

    一行可以显示多个行内元素

    高，宽不能自定义，是默认的。内容多少就多宽

    行内元素只能容纳文本或者其他行内元素 

    链接里面不能再放链接  a里面可以放块级元素  

    行内块元素：

    <img/>、<inpput/>、<td> 他们同时具有块元素和行内元素的特点 ，他们又称 行内块元素

        高度，行高，外边距都额可以设置

    元素显示模式转换：

    转换为块元素：display:block; 这样就可以独占一行并设置宽度和高度了。

    转换为行内元素：display：inline； 这样就可以一行放多个块元素了。

    转化为行内块元素：display：inline-block;
 

     CSS的三大特性：层叠行  继承性  优先级

     1。层叠性：遵循就近原则  谁离结构近 谁就执行 

      下边的样式覆盖上面的相同的样式  不影响其他的样式

     2.继承性：子元素继承父元素的某些样式  如文本颜色和字号

     text-  font-  line- 这些开头的可以继承  以及color 属性

     3.优先级：

        选择器相同，则根据层叠行进行优先级

        选择器不同，则根据选择器权重执行

        权重有四组数字组成，但是不会有进位

 ！important >行内样式style=“” >id选择器>类选择器，伪类选择器>元素选择器>继承，*

    3.1  权重叠加：如果存在复合选择器，则会有权重叠加，需要计算权重

    ul li {} 权重为 0，0，0，1 + 0，0，0，1 = 0，0，0，2 

    .nav li{} 权重为0，0，1，0 + 0，0，0，1 = 0，0，1，1

2px是字体大小  1.5值得是行高是12px的1.5倍 

            如果body 的子元素没有设置行高，则默认继承父类body的行高 即当前子元素文字大小的1.5倍

            font: 12px/1.5 Microsoft YaHei;

1：链接写出来

     2：样式上：首先把行内元素a标签转化为块元素。实现每个链接独占一行

     3：设置背景颜色、高度、宽度、字体大小、链接颜色、取消链接下划线、首行缩进2em 

     4：设置a链接鼠标经过时颜色变化 使用hover属性。 

     5：css中 实行单行文字垂直居中 文字的行高等于盒子的高度: line-height=height

     行高 = 上空隙+文字高度+下空隙

     背景属性：

     背景颜色：默认透明     background-color: #55585a

     背景图片：常用于logo或超大背景图默认平铺    background-image: url(pic.jpeg);

     背景平铺： background-repeat: no-repeat;

    有四种类型：     是否平铺       在横向平铺 在纵向平铺 

                repeat; no-repeat; repeat-x ;repeat-y

   背景图片和背景颜色可以同时添加  但是背景图片会压住背景颜色

     背景图片的位置：改变图片在背景中的具体   background-position: center top;

    x y 坐标可以使用方位名词也可以使用精确单位  top center bottom left right 

    如果是方位：X Y 顺序前后都可以 。也可以只写一个，另外一个默认。

     x 默认水平居中   y 默认垂直居中