HTML+CSS学习Day04笔记

Day04笔记

一、常用选择器

标记选择器

语法:

css: 
标记{
	width:200px;
    height:200px;
    border:1px solid red;
}

html:
<标记></标记>

特点：

• 标记选择器就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符，所以标记都可以
• 同类型的标记设置了样式，其他的都会起作用

class选择器

语法:

css:
.名称{
	属性:属性值;
}

html:
<标记 class="名称"></标记>

<标记 class="名称1 名称2"></标记>

特点：

• 同类型的标记可以起不同的名称，区别设置不同样式。例如：p、div、ul标记
• class选择器可以有多个名称

id选择器

语法:

css:
#名称{
	属性:属性值;
}

html:
<标记 id="名称"></标记>

特点：

• id选择器具有唯一性，使用id区分不同的标记

注意点：

• id选择器的唯一性是指的是一个标记只能有一个id名称
• 通过js获取标记的时候，如果多个标记都是同一个id名称，它会选择获取第一个

<div id="box1">选择器1</div>

<!--唯一性，id多个名称的时候就会失效-->
<div id="box1 fs">选择器2</div>
<div id="box1">选择器3</div>

class和id选择器区别:

• class一个标记可以对应的有多个名称，id一个标记只能有一个名称
• id具有唯一性通过js获取的话只能获取一个，而class一次性获取多个
• id的权重高于class的

问题:

• 同一个标记可以被多个选择的器选中，这个时候样式发生冲突的时候以什么为标准呢？
• 解决冲突以权重为标准

通配符选择器

语法:

语法：
css：*{}  *表示所有的意思

特点：

• 用来重置样式，把咱们一些标记自带的不需要的样式一次性给清除掉

群组选择器

语法:

选择符1，选择符2，选择符3{属性：属性值;}

特点：

• 可以一次性给多个标记设置同样的样式

注意点：

• 当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组
• 最后一个选择器不能设置逗号

包含选择器

语法:

html：
<标记1>
	<标记2></标记2>
</标记1>

css：标记1 标记2{}

特点：可以限定样式起作用的范围

示例代码:

<!--如果遇到标记嵌套关系，把外层的标记叫做父元素或者容器，把里面的叫做子元素-->
<div>
	<p>嘿嘿</p>
</div>

二、权重

• 权重是css给每个选择器自带的一种特性，用于解决样式冲突而存在的
• 权重规定使用四位数来表示，例如：标记选择器 0 0 0 1 class选择器 0 0 10 id选择器 0 1 0 0

常用选择器权重：

css中用四位数字表示权重，权重的表达方式如：0，0，0，0

类型选择符的权重为0001

class选择符的权重为0010

id选择符的权重为0100

伪类选择符的权重为0010

包含选择符的权重：为包含选择符的权中之和

内联样式的权重为1000

注意点：

• 当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式
• 相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式

三、常用css属性

width 宽度

height 高度

font-size 字体大小

line-height 行高

使用规则：

    a、当行高等于容器高度时可以让文本垂直居中

    b、当行高大于容器高度时可以让文本垂直往下

    c、当行高小于容器高度时可以让文本垂直往上

margin 外边距（边界）：指的是元素与元素之间的距离

分写形式：

    margin-left 左外边距

    margin-right 上右外边距

    margin-top 上外边距

    margin-bottom 下外边距

缩写形式：

    margin:值1; 值1表示四个方向都起作用

    margin:值1 值2; 值1表示上下 值2表示左右

    margin:值1 值2 值3; 值1表示上 值2表示左右 值3表示下

    margin:值1 值2 值3 值4; 分别表示上 右 下 左

组合使用：

	margin:0 auto;

padding 内边距（填充、补白）：指的是元素内容到边框之间的距离

分写形式：

    padding-left 左内边距

    padding-right 右内边距

    padding-top 上内边距

    padding-bottom 下内边距

缩写形式：

    padding:值1; 值1表示四个方向都起作用

    padding:值1 值2; 值1表示上下 值2表示左右

    padding:值1 值2 值3; 值1表示上 值2表示左右 值3表示下

    padding:值1 值2 值3 值4; 分别表示上 右 下 左

padding使用注意事项：

1、当一个容器有宽度或者高度的时候，如果设置了padding值会默认把元素的宽度或者高撑大，这个时候如果想保持元素原有大小不改变，需要从宽度或者高度减去对应的padding值

2、当控制的容器的内容是文本的时候只能使用padding，容器内容（文本、元素）

3、当控制的容器的内容是元素的时候，这个时候既可以使用padding也可以使用margin如何选择呢？那个简单就使用那个

4、当容器的内容是元素的时候，并且这个元素（默认自上而下排列的）自身没有设置宽度，根据元素的特性它的宽度默认跟容器是一样的。如果是这种情况下，给子元素设置了padding不需要从宽度上面减去


注意点：它们单位都是数值+px

text-align:left|center|right|justify; 文本水平对齐方式

justify表示的是两端对齐，针对于文本多的情况下

float:left|right|none; 浮动  

作用：可以让自上而下排列的元素横向排列

list-style:none; 清除列表符号（li默认前面点点）

text-decoration:none; 清除超链接的下划线

border 边框属性

border-left:1px solid red; 左边框

border-right:1px solid red; 右边框

border-top:1px solid red; 上边框

border-bottom:1px solid red; 下边框

背景属性
    
分写形式：

    background-color 背景颜色

    background-image:url(); url放的是图片路径

背景图显示规则：

    1、当背景图小于容器大小时，背景图会默认平铺

    2、当背景图大于容器大小时，背景图的某些部分显示不完整

    3、当背景图等于容器大小时，背景图刚好显示下

background-repeat:repeat|no-repeat|repeat-x|repeat-y; 平铺

repeat 平铺

no-repeat 不平铺

repeat-x 水平平铺

repeat-y 垂直平铺


背景图位置：

缩写形式：

background-position:left|right|center|top|bottom|数值+px; 背景图位置

background-position:值1 值2; 值1表示水平位置 值2表示垂直位置

分写形式：

background-position-x

background-position-y

background-attachment:scroll|fixed; 背景图固定属性

缩写形式：

background:值1 值2 值3 值4...;


背景图和图片区别：

    1、图片是一个具体的标记，会在页面中占位置

    2、背景图是属于一个属性，背景不会占位置

注意点：背景图默认都是在容器的左上显示的

四、伪类选择器

1、伪是假的意思，伪类描述的是某种状态，用于区别其他的选择器

2、伪类选择器语法:

a:link 鼠标初始状态

a:visited 鼠标访问过后的状态

a:hover 属性悬停时的状态 --- hover效果

a:active 鼠标激活时的状态，鼠标按着不动

3、注意点：

1、伪类选择器设置后，浏览器会默认给咱们进行记录鼠标状态

2、记录状态主要是为了区分有没有访问过这个链接

五、导航案例

结构代码：

<!--
	导航案例：
    
    1、结构搭建
    
    	=>导航在工作中都是使用ul和li的结构搭建
        
        =>导航里面的文字可以点击，超链接（a）点击
        
    2、样式使用
    
    	=>li默认是自上而下排列的，使用float属性改变li排列方向
        
        =>li标记默认自带了点点，不需要使用list-style:none;进行清除
        
        =>a标记默认自带了下划线，不需要使用text-decoration:none;进行清除
        
        =>其他标记可以继承父元素的文本颜色，a标记不能继承，文本颜色要设置在a标记上面
-->
<ul>
	<li class="first"><a href="#">首页</a></li>
    <li><a href="#">国内</a></li>
    <li><a href="#">国际</a></li>
    <li><a href="#">军事</a></li>
    <li><a href="#">财经</a></li>
    <li><a href="#">娱乐</a></li>
    <li><a href="#">体育</a></li>
    <li><a href="#">互联网</a></li>
    <li><a href="#">科技</a></li>
    <li><a href="#">游戏</a></li>
    <li><a href="#">女人</a></li>
    <li><a href="#">汽车</a></li>
    <li><a href="#">房产</a></li>
</ul>

样式代码：

/*清除默认的内外边距*/
*{margin:0;padding:0;}
ul{
    width:800px;
    height:40px;
    background-color:#01204f;
    margin:0 auto;
    margin-top:50px;
}
ul li{
    list-style:none;
    float:left;
    line-height:40px;
    /*相同字号大小的文字，如果字体不同最终在页面中显示的实际效果不一样*/
    font-size:14px;
    /*值1表示上下 值2表示左右*/
    padding:0 10px;
}
ul li a{
    color:#fff;
    /*清除下划线*/
    text-decoration:none;
}
/*高权重把低权重的给覆盖了，样式冲突问题*/
ul .first{
    padding-left:30px;
    background-color:#cc0000;
    background-image:url(images/icon.png);
    background-repeat:no-repeat;
    background-position:8px 8px;
}
/*表示当鼠标划过li标记时让其的背景颜色发生改变*/
ul li:hover{
    background-color:#cc0000;
}
/*表示放鼠标划过li标记时让它下的a标记文本颜色改变*/
ul li:hover a{color:greenyellow;}

ng:0 10px;
}
ul li a{
color:#fff;
/清除下划线/
text-decoration:none;
}
/高权重把低权重的给覆盖了，样式冲突问题/
ul .first{
padding-left:30px;
background-color:#cc0000;
background-image:url(images/icon.png);
background-repeat:no-repeat;
background-position:8px 8px;
}
/表示当鼠标划过li标记时让其的背景颜色发生改变/
ul li:hover{
background-color:#cc0000;
}
/表示放鼠标划过li标记时让它下的a标记文本颜色改变/
ul li:hover a{color:greenyellow;}