CSS的语法
选择器{属性1:属性值1;属性2:属性值2;}
CSS样式表
样式表就是设置CSS的地方
1.内部样式表(style标签)
<style>
CSS语句
</style>
2.内联样式表(style属性)
<div style="CSS语句"></div>
3.外部样式表(link标签设置)
3.1 新建一个CSS文件 例如:index.css style.css
3.2通过link标签引入
<link rel="stylesheet" href="文件的路径">
rel:定义关联样式表
href:css文件的路径
4.@import设置(不推荐)
style标签内设置
<style>
@import url("css文件的路径");
<style>
不推荐的原因
1加载顺序问题,(先加载结构后加载样式,网速慢,网页会卡顿)
2兼容性没有link好
3对js的dom支持度也不好
CSS权重
(同一个内容)设置(相同的属性),但是属性值不同,这时候谁的权重高听谁的.
样式表的权重
内联样式表权重最高
内部样式表和外部样式表权重是相同的,由于浏览器的加载顺序,后面的会把前面的内容覆盖
(谁在后面谁的样式表权重就高)
查看控制台检查错误
打开网页快捷键F12
控制台查看路径
找到source :查看是否有css文件
有文件表示没问题
无文件则连接路径错误
Photoshop的使用方式
放大图片
按住alt键,滑动滚轮可以放大
移动图片
按住空格键,拖动鼠标可以移动图片
测量方式
点击菜单的第二个矩形框工具
按住鼠标不放,测量的数据可以看见
按F8可以打开信息面板
测量单位修改设置
点击编辑→首选项→单位与标尺(将厘米改成像素确定,就可以了)
选择器
怎么去选择内容,方便我们设置CSS样式
1.标签选择器
<div></div> div{} (标签选择器,元素选择器)
会选择网页所有div标签;
标签选择器不推荐直接使用(使用范围太广,推荐配合其他选择器使用)
2.id选择器
2.1 id是唯一的,一个网页中只能出现一次,不能重复,重复不符合规范
<div id="box1"></div> #box1{}
3.class选择器
<div class="box2"> </div> .box2{}
3.1class名可以重复使用
3.2class可以有多个值(用空格隔开)
3.3多个class添加样式,权重冲突,后面设置的class权重高
4.通配符选择器
*{margin:0;padding:0} 清除网页内容的内外边距
5.群组选择器
群组选择器可以给不同的内容同时设置相同的属性
#box1,#box2{}
6.包含选择器
父子选择器(通过父元素选择子元素,只能往下选择一层)
父元素>子元素{}
后代选择器(只要满足包裹关系都能选中)
祖先(空格)后代{}
7.伪类选择器
a:link 访问前的样式
a:visited 访问后的样式
a:hover 鼠标移入的样式(所有标签都能添加)
a:active 鼠标激活后的样式
选择器命名规范
由字母,数字,下划线,-,组成.(不能有中文,特殊符号:空格)
驼峰命名法
newsLeft newsLeftList(js命名较多)
连接命名法
news-left
下划线命名法
news_left
CSS常用属性
1.字体大小:font-size
2.文本字体:font-family
3.字体颜色:color
4.字体加粗:font-weight:
bold:加粗
bolder:更粗
normal:取消加粗
5.字体倾斜:font-style
italic 倾斜
oblique 更倾斜
normal 取消倾斜