1.CSS内部样式

• 一般会写在标签中

    
    
    
    
    


    
11111111111
    
22222222222
    
33333333333

2.外部样式表

    
    
    
    
    
    
    
    


    
111111
    
2222222
    
333333

• 扩展知识点：link与import之间的区别
  • 差别1：本质的区别：link属于XHTML标签，而,@import完全是CSS提供的一种方式
  • 差别2：加载顺序的差别：当一个页面被加载的时候（就是浏览者浏览的时候），link引用的css会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，就是闪烁，网速慢的时候还挺明显
  • 差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签没有这个问题

3.行内样式表

    
    
    
    


    
我是div
    

4.样式表的优先级

• ！import>行内>内部>外部

• 例子：color:red!important

• 针对同一个属性，同一个标签，否则不存在优先级的问题

5.标签选择器

• 直接使用标签名（也被称之为元素选择器）

6.类选择器

• 在类名之前加个点
• 在一个便签中有两个class并且有共同属性时，跟class的定义位置有关，定义时后面定义的会覆盖前面的，class的书写位置无关

7.id选择器

• 一个id名称只能对应文档中一个具体的元素对象（唯一性）
• 使用方式：在id名前加一个#号

8.通配符选择器

*{ margin:0;padding:0; }

• margin是外边距
• padding是内边距

9.群组和后代选择器

    
    
    
    
    



    
111111111111111
    
1111111111111111
    
111111111111
    

    
    
    
    
    



    

        

            111111111111
        
    

    
2222222222222
    

• 后代选择器实际上是从右到左去匹配！

10.伪类选择器

• 语法：
  • a:link{属性：属性值}超链接的初始状态
  • a:visited{属性：属性值;}超链接被访问后的状态
  • a:hover{属性：属性值}：鼠标悬停，即鼠标划过超链接时的状态
  • a:active{属性：属性值}超链接被激活时的状态，即鼠标按下时超链接的状态
  • Link–visited–hover–active
• 说明：
  • A)当这四个超链接伪类选择器符联合使用时，应注意他们的顺序，正常顺序为：a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效
  • B)为了简化代码，可以把伪类选择器符中相同的声明提出来放在a选择符中；例如：a{color:red} a:hover{color:green}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样

    
    
    
    
    


    百度

11.新闻导航案例

    
    
    
    
    



    首页
    国内
    国际
    军事
    财经

12.选择器权重

个数	选择器	权重，CSS中用四位数字表示权重，权重的表达方式如：0,0,0,0
1	类型（元素选择器）	0001
2	Class选择器（类选择器）	0010
3	id选择器	0100
4	包含选择器	为包含选择符的权重之和
5	内联选择器	1000
6	!import	10000
	CSS选择器解析规则1：	当不同选择符的样式设置有冲突的时候，高权重选择器符的样式会覆盖低权重选择符的样式
	CSS选择器解析规则2：	相同权重的选择符，样式遵循就近原则，哪个选择符最后定义，就采用哪个选择符样式

13.文本属性

个数	属性	描述	说明
1	font-size	字体大小	单位是px，浏览器默认是16px，设计图常用字号是12px
2	font-family	字体	当字体中是中文字体、英文字体中有空格时，需加双引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
3	color	颜色	color:red color:#ff0; color:rgb(255,0,0) 0-255，rgba()–最后一个数字表示透明度
4	font-weight	加粗	font-weight：bolder(更粗的)/bold(加粗)/normal(常规) font-weight:100-900;100-500不加粗，600-900加粗
5	font-style	倾斜	font-style:italic(斜体字)/oblique(倾斜的文字)/normal（常规显示）
6	text-align	文本水平对齐	text-align:left水平靠左text-align:right水平靠右text-align:center;水平居中text-align:justify;水平两端对齐，但是只对多行起作用
7	line-height	行高	lline-height的数据=height的数据，可以实现单行文本垂直居中，行高
8	text-indent	首行缩进	text-indent可以取负值；text-indent属性只对第一行起作用，一般使用2em，即相对字体大小的两倍
9	letter-spacing	字间距	控制文字与文字之间的距离，字符间距
10	word-spacing	词间距	可以取负值
11	text-decoration	文本修饰	text-decoration:none没有（一般用在超链接中）/underline下划线/overline上划线/line-through删除线，如果要使用多个，使用空格隔开
12	font	文字简写	font是font-style font-weight font-size/line-height fomt-family的简写。例：font:italic 800 30px/80px "宋体"顺序不能改变，必须同时指定font-size和font-family属性时才起作用
13	text-transform	大小写	capitalize–首字母大写，lowercase小写，uppercase全部大写，none不做设置

• font-family常用字体：
  • 微软雅黑
  • 楷体
  • 宋体
• 字体加粗：100细体，400正常，700加粗，900更粗体

14.千锋简介案例

    
    
    
    
    



    
千锋简介
    
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
        Fuga, amet modi pariatur dolorem
        officia, quas quasi
        aliquid molestiae qui,
        deleniti mollitia magnam praesentium quaerat at animi tempore 
        assumenda quibusdam ex.
    

    
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus assumenda, dolore
        libero
        explicabo, commodi
        minima voluptate molestiae et excepturi provident animi in iure exercitationem aperiam vel nostrum repellat
        mollitia voluptas!
    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus reiciendis adipisci dolore ex
        maxime libero
        provident debitis inventore soluta voluptatem quisquam, illum hic in accusantium! Perspiciatis fuga quis
        voluptatem corporis.

• 格式化代码

15.列表属性

个数	属性	描述	说明
1	list-style-type	定义列表符合样式	list-style-type:disc（实心圆）/circle(空心圆)/square(实心方块)/none(去掉符号)
2	list-style-image	将图片设置为列表符合样式	list-style-image:url();
3	list-style-position	设置列表项标记的放置位置	list-style-position:outside;列表的外面 默认值 list-style-position:inside列表的里面
4	list-style	简写	list-style:none去除列表符号 list-style:disc url() inside(这里顺序可以随便改换)

16.背景属性

个数	属性	描述	说明
1	background-color	背景颜色	background-color:red
2	background-image	背景图片	background-image:url()
3	background-repeat	背景图片的平铺	background-repeat:no-repeat/repeat/repeat-x/repeat-y
4	background-position	背景图片的定位	background-position:水平位置 垂直位置；可以给负值（可以给数值也可以使用right、left、center）
5	background-attachment	背景图片的固定	background-attachment:scorll(滚动，默认值)/fixed(固定，固定在浏览器窗口，固定之后就相对于浏览器窗口了)
			可以简写成background
6	background-size	背景图片的大小	`background-size:500px 500px

    
    
    
    
    



    
大家好
        

    
    


    

17.视觉差案例

18.知乎案例

19.背景的复合属性

20.浮动属性

个数	属性	描述	说明
1	float	float:left	元素靠左边浮动
2	float	float:right	元素靠右边浮动
3	float	float:none	元素不浮动
浮动的作用1：		定义网页中其他文本如何环绕该元素显示
浮动的作用2：		就是让竖着的东西横着来
4	clear	Clear:none;	允许有浮动对象
5	clear	Clear:right	不允许右边有浮动对象
6	clear	Clear:right	不允许左边有浮对象
7	clear	Clear:both	不允许有浮动对象
		清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置

• 谁先左浮动谁在左边，谁先右浮动谁在右边

• 浮动属于见缝插针，不会按照垂直一直排列

21.浮动案例

    
    
    
    
    



    

        
        
吴磊时尚大片曝光 少年感十足
    
    

        
        
吴磊时尚大片曝光 少年感十足
    
    

        
        
吴磊时尚大片曝光 少年感十足
    
    

        
        
吴磊时尚大片曝光 少年感十足
    
    

        
        
吴磊时尚大片曝光 少年感十足
    

22.盒子模型

    
    
    
    
    



    

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora eligendi culpa. Accusantium aspernatur
        minus asperiores impedit quibusdam cumque magni culpa vitae amet. Excepturi, id doloremque. Alias repudiandae
        voluptas aperiam?
    

内边距特性

• 背景色延伸到内边距

• 可以使用padding-方向的写法设置单个方向

• 不能设置负数

边框

border:1px solid gray

• 三个属性分别是：大小，样式，颜色

• 其中样式有solid–实线，double是双实线，dashed线段线，dotted点状线

• 同样支持border-方向设置单个方向

• 同时，还可以单独设置大小，样式与颜色：border-widthborder-styleborder-color

• 1个值表示四个方向都一样

• 2个值表示上下和左右

• 3个值：上，左右，下

• 4个值：上，右，下，左

外边距特性

margin:1px 2px 3px 4px

• 支持四个方向

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

• 外边距支持负数

• 屏幕居中方案：margin:0 auto

1.兄弟关系

• 垂直方向，外边距取两个当中的最大值，但是如果另一个为负数则会取和
• 水平方向，会直接求和

2.父子关系

• 水平与垂直特性与兄弟关系相同

23.PS基本操作

ps===图片处理软件（美工用来作图，前端用来测量，吸取颜色，切图）

拿到设计稿之后使用ps打开

• 图片放大和缩小

  • ctrl++
  • ctrl±
  • alt+滚动

• 图片的移动

  • 按住空格，鼠标变为小手，拖动图片

• 如何调整出标尺

  • ctrl+r
  • 作用：拖动参考线方便测量
  • 视图里面找到标尺，把对勾勾选上

• 测量图片大小

  • 标尺-右键-像素
  • 使用矩形选框工具（左侧竖着第二个）
  • 如何查看数据大小（窗口------信息面板=====wh）

• 截图

  • 1.使用快捷键截图===每次只能截取一个
    • 使用选框工具框选你要截取的区域
    • ctrl+cctrl+n回车=ctrl+v=ctrl+s回车=======回车
  • 2.切片工具（裁剪工具进行切换）
    • 使用切片工具框选你要留住的区域，点击文件，存储为wen所用格式，弹窗里面点击存储
    • 弹窗======格式：仅限图像，切片：所有用户切片

• 吸取颜色

  • 使用吸管工具
  • 吸取完颜色后，点击左下角的背景色，会有弹窗，在弹窗里面选择十六进制的颜色值并进行复制

24.盒子案例

    
    
    
    
    



    

        
女人图片
        

            


            
            
这是一张无关紧要的图片
        
        

            

                


                
啊哈哈哈，我滴任务完成啦
            

            

                


                
给你机会你不中用啊
            
        
    

25.溢出属性 1.溢出属性（容器的）

说明：

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

• visible:默认值，溢出内容会显示在元素之外
• hidden：溢出内容隐藏
• scroll：滚动，溢出内容以滚动方式显示
• auto：如果有溢出会添加滚动条，没有溢出正常显示
• inhreit：规定应该遵从父元素继承overflow属性
• overflow-x：X轴溢出
• overflow-Y：Y轴溢出

    
    
    
    
    



    

        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi officia impedit commodi, quibusdam repellendus
        repudiandae ex ullam neque iusto id debitis dolorum? Consequatur iure reprehenderit fugiat quos reiciendis
        tempora pariatur.

    
    

2.空余空间

说明：

• white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit该属性用来设置如何处理元素内的空白；

• normal:默认值，空白会被浏览器忽略

• nowrap：文本不会换行，文本会在同一行上继续，直到遇到
  标签为止

• pre-wrap：显示空格，回车，换行

• pre-line：显示回车，不显示空格，换行

说明：

• text-overflow:clip/ellipsis
• clip:默认，不显示省略号（…）
• ellipsis:显示省略标记

当单行文本溢出显示省略号需要同时设置以下声明：

1.容器宽度：width:200px

2.强制文本在一行内显示：white-space:nowrap

3.溢出内容为隐藏：overflow:hidden

4.溢出文本显示省略号：text-overflow:ellipsis

26.溢出属性案例

    
    
    
    
    



    

        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        

        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]
        
        

            

                
¥100.00圆
                
有效期至：2022-8-4
            
            
[店铺类][商城类]