CSS教程

css4

本文主要是介绍css4，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

九. CSS三大特性

1. 层叠性（覆盖性）：

相同的选择器给设置相同的样式，此时一个样式会覆盖另一个冲突的样式、
层叠性就是要解决样式冲突的问题
层叠性原则：

  1. 若样式冲突：就近原则，离那个样式结构近，就执行那个样式
  2. 样式不冲突，不会层叠
<style>
/*两个都是标签选择器同时对元素设置*/
div {
	color: red;
	font-size:24px;
	}
div {
	color: pink;
	}
/*字体大小不会覆盖，显示为粉色*/
</style>
</head>
<body> 
<div>往前走，别回头</div>

2. 继承性 ：

  1. 子标签继承父类标签样式，会继承父类的像文字相关的样式，例如：以text-- ,font--, color line--等， 就是说并非继承父类的所有样式
  2. 应用：整个页面的字体大小，颜色 等可以设置在body 标签里面

  3. 行高的继承：

分两种形式，就是行高带不带单位来区分

  1. 父标签行高带有单位
body {
	font: 12px/24px "Microsoft Yahei"
    字体大小是12像素，行高24像素，字体类型是微软雅黑
	}

body的所有子标签的行高都会是继承它的24像素
2. 父标签行高不带有单位

<style>
body {
	font: 12px/1.5  "Microsoft Yahei"
	}
p {
	color: red;
	font-size:24px;
	}
	子类继承父类的1.5，此处的1.5指的是子类当前文字大小的1.5倍就是子类的行高  line-height=24*1.5
	body行高1.5， 这样写法最大的优势就是子元素可以给句自己文字大小自动调整行高
</style>
</head>
<body> 
<p>冲呀</p>
</body>

子类的行高是继承过来的数字乘以本身字体的大小，大小，那肯定继承父类的文字大小

4. 对于超链接a要区别对待: 即使它的父类元素修改了字体颜色，a的颜色不会改变，因为浏览器默认a的样式是;蓝色字体， 有下划线； 若想对a标签进行修改：一般是将a单独选出来进行修改样式

3. 优先级 ：

  1. 当同一个元素指定多个选择器，就会有优先级的产生
  2. 若选择器相同，就执行层叠性
    若选择器相同，就根据选择器的权重执行
  3. 选择器的权重：
    选择器 选择器的权重
  4. 继承或全局选择器 0，0，0，0
  5. 标签选择器 0，0，0，1
  6. 类选择器 伪类选择器 0，0，1，0
  7. id选择器 0，1，0，0
  8. 行内样式 style="" 1,0,0,0
  9. !important 无穷大
    发现：选择器的权重：类比于四位二进制数表示一位单位
    不过在进行计算选择器的权重时，记住：不存在进位现象
    当然方便记忆，可以简记为0 1 10 100
    属性：属性值 !important ；表示权重最大
    继承的权重是0
#one{
   color: red;
/*父类的权重是0100
但它的子类p继承的权重就为0*/
   }
/*p是标签选择器权重是0001*/
p {
   color: pink;
}
/*显示为粉色*/
</style>
</head>
<body> 
<div id="one">
<p>冲呀</p>
</div>
</body>
  1. 针对复合选择器：有权重的叠加
<style>
/*权重叠加计算：
ul  li 权重：
0001 + 0001 =0002*/
ul li {
	color :red;
	}
	/*li 的权重：
	0001*/
li {
	color :green;
	}
/*显示红色*/
</style>
</head>
<body> 
<ul>
<li>一切会有回报的</li>
<li>往前</li>
<li>再往前</li>
</ul>
</body>

计算：
0001+0010=0011
0100+0100=0200
1000+1000=2000
不是二进制运算，不会存在进位现象

盒子模型

  1. 局学习三大核心：盒子模型 浮动 定位
  2. 页面布局的过程：
    1. 先准备好相应的网页HTML元素，网页元素基本上都是盒子
    2. 利用CSS设置好盒子的样式，然后摆到相应的位置
    3. 往盒子里装内容
  3. CSS盒子包括：边框，外边距，内边距，实际内容
这篇关于css4的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航