CSS入门

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 取消倾斜