【自学】前端笔记-css

层叠样式表(英文全称:Cascading Style Sheets)


语法

css使用方法:

 ·   行内样式(内联样式)

 ·   内部样式表(嵌入样式)

 ·   外部样式表(Link链入)

  ·  导入式

css行内样式:

· 在开始标签内添加style样式属性

· 如:

内容

css内部样式:

    内部样式(嵌入样式),把css样式代码写在:

   

    说明:

伪类

伪类用于向某些选择器添加特殊的效果,通常用于给链接添加交互效果

:link     

:visited 

:hover   

:active   

ps::hover与:active任何元素都可应用,

顺序::link :visited>:hover>:active(:link与:visited前后顺序随意,:hover要在前两个后面,:active要在:hover后面)

css继承与层叠

继承:css子级元素会继承父级元素的某些样式属性

层叠:可以定义多个样式

      不冲突时,多个样式可以层叠为一个

      冲突时,按不同样式规则优先级来应用样式

css优先级规则

同一样式表中:

  1.权值相同

      就近原则(离被设置元素越近优先级越高)

  2.权值不同

      根据权值判断css样式,哪种css样式权值高,就使用哪种样式

选择器权值

  标签选择器:1

  类和伪类:  10

  全局选择器:0

  id选择器:  100

  行内样式:  1000

权值规则

  统计不同选择器的个数

  每类选择器的个数乘以相应的权值

  把所得的值相加就是选择器的权值

!important规则

  可调整选择器的优先级

  添加在样式规则之后,中间用空格隔开

css命名规则

  采用英文字母、数字以及"-"和"_"命名

  以小写字母开头,不能以数字及"-"和"_"开头

  命名形式:单字,连字符,下划线和驼峰

  使用有意义的命名

常用的css样式命名

1)页面结构 

  页头:header                           导航:nav

  页面主体:main                       侧栏:sidebar

  页尾:footer                             栏目:column

  内容:content/container           页面外围控制:wrapper

  容器:contentainer                   左右中:left right center

2)导航

  导航:nav                                左导航:leftsidebar

  主导航:mainnav                    右导航:rightsidebar

  子导航:subnav                      菜单:menu

  顶导航:topnav                       子菜单:submenu

  边导航:sidebar                      标题:tilte

                                                   摘要:summary


3)功能

  标志:logo                              注册:register

  广告:banner                          搜索:search

  登录:login                              功能区:shop

  登录条:loginbar                     标题:title

Id跟class应用

   Id不要滥用,谨慎使用

  适当使用class

你可能感兴趣的:(【自学】前端笔记-css)