7.28 CSS外部样式,选择器,属性


1、CSS外部样式的引用
<!--引用外部样式-->   
 <!--CSS style引用规律   
 1:就近原则    
 2:叠加原则
-->
<link rel="stylesheet" href="CSS/index.css">

2、CSS标签选择器

CSS样式规律

  • 相同类型的选择器遵循 a.就近原则 b.叠加原则
  • 不同类型的选择区遵循 : 选择器针对性越强,优先程度越高
  • 选择器的权值加到一起,大的优先;如果权值相同,后定义的优先(就近原则)
  • important > 内联选择器(行内) > id选择器 > 类选择器 | 伪类 |属性选择器 > 伪元素 > 标签选择器> 通配符 > 继承
/*复合选择器*/
div.test1{
    color: #ff8559;
  }
/*类选择器 权值:10*/
    .test1{
    color: black;
  }
  .test2{
    color: yellow;
}
/*标签选择器 权值:1*/
div {
    color: red !important;
}
/*id选择器 权值:100*/
#er{ color: aquamarine;
}
/*通配符 权值:0
    1.优先级别非常低
    2.性能比较差
*/
*{
    font-size: 30px;
}
3、三种标签样式 行内标签、块级标签、行内-块级标签

行内标签:独占一行,能设置宽高
块级标签:多个可以占一行,宽高有内容决定
行内-块级标签:同时包含两种属性,技能设置宽高,又可以多个标签占一行

他们之间可以用display这个属性来相互转换 none;block;inline;inline-block

4、CSS属性

background 设置背景
display:显示类型(none、block、inline、inline-block)
padding内边距:(四种方式)
margin 外边距:(四种方式)
border 设置边框:(border-width、border-style、border-color)
overflow 设置超出元素边界内容的显示
line-height 垂直居中
cursor设置光标的类型 (手指十字架)
text-decoration设置a标签的下划线
text-align水平居中
list-style 设置列表左边编号的类型,经常用 none

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容