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