CSS的概念

CSS(Cascading Style Sheets)，意思是层叠样式表，用于定义HTML内容在浏览器内的显示样式。

引用CSS

引用方式：

方式1：行内样式(内联样式）
<p style="color:red;">内容</p>

方式2：内部样式表(嵌入样式)
<style type="text/css">
    样式...
</style>

方式3：外部样式
<link rel="stylesheet" href="xx.css" type="text/css"/>

方式4：导入式
<style type="text/css">
     @import "css.css"
</style>

区别：

css.png

优先级：

• 行内样式>内部样式>外部样式(包括导入式)
• 外部样式与内部样式之间的优先级取决于所处位置的先后，最后定义的优先级最高(就近原则)

CSS选择器

选择器1：标签选择器
p{
  font-size:16px;
}

选择器2：类选择器
.red{
  font-size:16px;
}

选择器3：ID选择器
#red{
  font-size:16px;
}

选择器4：群组选择器
p,h1,h2,h3,h4{
  font-size:16px;
}

选择器5：后代选择器
.red p{
  font-size:16px;
}

选择器6：伪类选择器
a:link{color: blue;}      /*未访问状态*/
a:visited{color: gray;}   /*已访问状态*/
a:hover{color: green;}    /*鼠标悬浮状态*/
a:active{color: orange;}  /*激活状态*/

注意：伪类名称对大小写不敏感

CSS继承，层叠和优先级

继承

父元素设置样式，子元素可以继承部分属性(不是所有属性都可以继承)

层叠

• 可以定义多个样式
• 不冲突时，多个样式可以层叠为一个
• 冲突时，按不同样式规则优先级来应用样式

优先级

1，!important声明优先级最高

div{
  color:red !important;
}

2，权值相同：就近原则(离被设置元素越近优先级越高)
3，权值不同：根据权值判断

• 通配符选择器(*)：0
• 元素和伪元素选择器：1
• 类，属性选择器和伪类选择器：10
• ID选择器：100
• 行内样式：1000

注意：伪元素选择器，属性选择器和伪类选择器，参照文章CSS3选择器

CSS命名

页面结构

• 页头：header
• 页面主体：main
• 页尾：footer
• 内容：content/container
• 容器：container
• 导航：nav
• 侧栏：sidebar
• 页面外围控制：wrapper
• 左右中：left right center

导航

• 导航：nav
• 主导航：mainNav
• 子导航：subNav
• 顶导航：topNav
• 边导航：sidebar
• 左导航：leftSidebar
• 右导航：rightSidebar
• 菜单：menu
• 子菜单：subMenu
• 标题：title
• 摘要：summary

功能

• 标志：logo
• 广告：banner
• 登录：login
• 登录条：loginBar
• 注册：register
• 搜索：search
• 功能区：shop
• 标题：title

Reset CSS

https://meyerweb.com/eric/tools/css/reset/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}