【学习】CSS基础(一)

CSS基础(一)

本文参考了http://www.w3school.com.cn/css/


什么是CSS

  • 层叠样式表 (Cascading Style Sheets)
  • 可以独立与html文档,存在于.css文件中
  • 可被应用到多个html文档中
  • 可以使html文档专注的表示文档内容而不需要考虑样式

优先级

  • 最高:内联样式,在标签内部声明
  • 其次:内部样式,在head标签声明
  • 再次:外部样式,在.css文件中声明
  • 最后:浏览器的缺省设置

基本语法

selector{
    property1: value1;
    property2: value2;
}
  • selector可以多个同时赋值,用逗号隔开
  • 属性后面一定要加冒号,习惯性加一个空格
  • 值的后面加分号,如果是两个单词或以上要加引号

关于继承

  • 不是每个浏览器都支持继承,一般来说规定了父标签之后,紧接着规定字标签的属性

派生选择器(上下文选择器)

  • 规定某一标签在另一标签内部时的样式
  • selector2在selector1内部时属性满足如下条件
selector1 selector2{
    property1: value1;
    property2: value2;
}

id选择器

  • 在标签中标记id,id在css文件中
  • css文件
#idname{
    property1: value1;
    property2: value2;
}
  • html文件
<html>
<head>
  <tittle>timu</tittle>
</head>
<body id="idname">
</body>
</html>

 


类选择器

  • 在标签中标记class,class在css文件中
  • css文件
classname{
    property1: value1;
    property2: value2;
}
  • html文件
<html>
<head>
  <tittle>timu</tittle>
</head>
<body class="classname">
</body>
</html>
  • 也可以规定类内的标签样式
.classname p{
    property1: value1;
    property2: value2;
}
  • 也可以规定标签内部的类
p.classname{
    property1: value1;
    property2: value2;
}

属性选择器

  • 在标签中标记属性,属性在css文件中
  • css文件
[tittle]{
    property1: value1;
    property2: value2;
}
  • html文件
<html>
<head>
  <tittle>timu</tittle>
</head>
<body tittle="prop_name">
</body>
</html>
  • 上面规定所有标签内部有 tittle=”“的都满足上述属性
  • 在css文件中也可以这样定义
  • css文件
[tittle="big"]{
    property1: value1;
    property2: value2;
}

上面规定所有标签内部有 tittle=”big”的都满足上述属性

  • 我觉得属性选择器相当于自己定义了一个类之类的东西
  • 在input这样的不能用类的标签中就需要属性选择器了
posted @ 2017-11-15 15:23  姜博文  阅读(214)  评论(0编辑  收藏  举报