H5-CSS

css样式表

css新建格式

内部样式表

<sytle type="text/css">
  css语句
</sytle>

内联样式

<div sytle="属性:值1;属性2:值2"></div>

引用外部样式表文件

直接引用(link)

<link href="路径" rel="stylesheet" type="text/css" />
<!--同样写在head头部,rel定义文档关联样式表,type定义文档类型-->

导入(@import)

<style type="text/css">
  @import url("adress");
</style>
<!--括号内部加引号,必须结尾加上分号-->

优先级说明

内联样式表的优先级别最高,内部样式表与外部样式的优先级和书写的顺序有关,后书写的优先级高

css选择器
1. 类型选择符
  
  标签名称{属性:属性值;} 所有的页面元素都可以作为选择符
  
  用法 : 1. 想改变某个元素的默认样式时
  
  2.统一文档某个元素的显示效果时
2. 类选择符 (class)
  
  .class名{属性:属性值;}
  
  选择类选择符时,应该先为每个元素定义一个类名称
  
  格式<div class="top"></div>
3. ID选择符
  
  #id名{属性:属性值;}
  
  可以给每个元素使用id选择符,但是id是元素的唯一标识符,不可出现重复的id名;
  
  <div id="top"></div>
  
  名字需英文,不能用关键字,唯一性
  
  创建网站的外围结构
4. 通配符(*)
  
  *{属性:属性值;}
  
  用来重置样式
  
  *{margin:0;padding:0;}
5. 群组选择符(集合选择器)
  
  选择符1,选择符2,选择符3{属性:属性值;}
  
  当有多个css选择符应用相同的样式时,可以选用','分隔
  
  页面居中设置 选择符1,选择符2,选择符3{margin:0 auto;}
6. 包含选择符(后代选择器)
  
  选择符1(选择符父级) 选择符2(选择符子级){属性:属性值;}
  
  选择符之间用空格隔开,含义就是选择符1中包含所有选择符2
7. 伪类选择器
```
a:link{color:#FF0000}     #未访问的连接
a:visited{color:#00FF00}      #已访问的连接
a:hover{color:#FF00FF}        #鼠标移动到连接上
a:active{color:#0000FF}       #选定的连接
```
  注意使用顺序,
  
  a,a:link,a:visit,a:hover,a:active
  
  a{color:red; } a:hover{color:greemn;}
8. 切图
  
  常用快捷键
  1. shift+
    
    c 裁剪 m选框 i吸取 h抓手 z缩放 x前景和背景切换 f屏幕模式的切换
  2. Ctrl+
    
    s保存 shift+s另存 z返回上一步 t自由变换 c复制 v粘贴 n 新建
9. 注释
  
  HTML注释``
  
  css注释/*--------------注释------------*/
10. 选择符的权重

H5-CSS

css样式表

推荐阅读更多精彩内容