css选择器

伪类选择器，冒号开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格

选择器的种类

基本选择器（三种：标签、id、class）

标签选择器

  p{color:red;}

    <p >hello</p>

id选择器用#定义

特点：在一个网页中id号必须是唯一的，页面中只有唯一一个地方用的，一个页面只能用一次。

  #hh{color:red;}

    <p  hh=“pcontent”></p>

class类选择器。

多个地方的样式一样就用class选择器

 . class{color:red;}

    <p class></p>

其他选择器类型

标签名,标签名,……{属性1:值;属性1:值;属性1:值;……}

后代选择器

父元素   子元素 {属性1:值 ; 属性1:值  ;  属性1:值;……}

p   span{color:#60F; font-family:"华文琥珀", "华文楷体"}

 这里的p标签是父元素，span标签是子表现，只有p中的span标签才可以显示

子代选择器

子代选择器就是与之相匹配的第一个元素

标签名（父元素）>标签名（子元素）{属性1:值;属性1:值;属性1:值;……}

p>span{color:red; font-family:"华文琥珀", "华文楷体"}

相邻兄弟选择器

子元素1+子元素2（相邻）{属性1:值;属性1:值;属性1:值;……}

h2+p{color:red}

<h2>hello world</h2>
<p>hello</p>

此时的p标签1的颜色也是红色

背景

背景颜色:background-color

背景图片:background-imag

背景图片如何被重复background-repeat

 背景图片位置:background-position

内容方面的居中：background-position:center center

图片在左下被图片固定：background-position:left bottom

background-attachment

background-attachment:fixed

文本属性

字体大小：font-size

字体颜色：color

字体粗度：font-weight

对齐方式：text-aligh

首行缩进：text-indent

行高：line-height

楷体：font-family

字体：font-family

执行结果如下

伪类名:

active:激活时添加

focus输入时添加

hover:触摸添加

link:未被访问链接

visited以访问链接添加

first-child添加样式选择父类的第一个样式

 focus

input:focus{
background-color:red
}
//获得焦点的输入框变成红色

 注意：先后顺序link-visited-hover-active口诀lv包包hao

 执行结果

first-child只对第一个p标签起作用

盒子模型

overflow:auto不超过没有滚动条，超出有滚动条

overflow:scroll滚动条

overflow:hidden隐藏

overflow:hidden超出部分隐藏

内容超过宽度和高度会出现溢出的情况 ，这个时候overflow就起到了一定的作用

div

快元素如果不设置宽度默认是父标签宽度的百分之百div块的高度随着字体的改变而改变，如果里面没有内容，高度是0。

盒子的模型

border边框属性

border-color:边框颜色 

border-style{dotted:点  dashed：虚线   solid：实线   , double：双线}

border-bottom-style:dotted;

border-width:6px

内容和边框之间的距离叫padding

padding-bottom、padding-top、padding-left、padding-right

padding:10px 20px 30px 40px  从上方开始顺时针方向添加内边距，上为10，右为30，下为30，左为40

  上下填充值各20px，左右是各50px  

padding:20px  50px; 

右内填充值为30px

padding-right:30px

margin:外间距，盒子到其他盒子或者边缘的距离

margin: 10px 20px 30px 40px;

 

 四周边距设置为20像素

margin:20px

 计算盒子的像素的宽度需要把所有的像素宽度加起来