前端CSS

基础语法

/*
    CSS注释
*/

宽高的百分比是按照父级大小来计算的

前端CSS_第1张图片

CSS样式

CSS应用方式

内联式

在标签上写样式



中国联通

嵌入式

在head标签中写style标签

        前端CSS_第2张图片前端CSS_第3张图片

外联式

样式写到文件中,放到static目录下的css文件,class='c1',c1是css文件中的变量名




    
    Title
    



用户登录

用户登录

用户登录

用户登录

选择器

id选择器

id标准写法是id唯一性,所以不太常用

        前端CSS_第4张图片前端CSS_第5张图片

类选择器

        前端CSS_第6张图片前端CSS_第7张图片

标签选择器

所有的标签统一设置属性,同时设置多个标签h1,p,h2{color:gold}

        前端CSS_第8张图片前端CSS_第9张图片

属性选择器

        前端CSS_第10张图片前端CSS_第11张图片

 后代选择器

找儿子 .类名>儿子标签名

找所有后代 .类名>标签名

        前端CSS_第12张图片前端CSS_第13张图片

 背景颜色

        前端CSS_第14张图片前端CSS_第15张图片

 背景图片

background-repeat属性
repeat-x:按照x轴平铺
repeat-x:按照y轴平铺
no-repeat:无平铺样式

        前端CSS_第16张图片

background-repeat: no-repeat;

background-position: center; 这两个组合一起设置图片位置

background-position: center,top;  中间的顶部

background-attachment: fixed; 固定在一个位置

背景大小

前端CSS_第17张图片 

样式覆盖逻辑

无重复全部应用。重复内容按照头部顺序覆盖,和标签内顺序无关。




    
    Title
    


    
中国联通

前端CSS_第18张图片

声明不要覆盖样式 




    
    Title
    


    
中国联通

前端CSS_第19张图片

hover样式(伪类,冒号后边追加的)

hover正常应用




    
    Title
    


    

hover升级应用




    
    Title
    


联通
广西
下载APP

显示/隐藏

        显示 display: none;

        隐藏display: block;

after追加(伪类)

  • 相当于后置处理追加内容
  • 只对追加的内容设置属性



    
    Title
    


    
吴阳军
梁吉宁

前端CSS_第20张图片




    
    Title
    


    
吴阳军
梁吉宁
梁吉宁

 

块级标签和行内标签

宽高

宽高可以设置百分比

块级标签:默认有效(霸道,右侧区域空白,也不给你占用),div

行内标签:默认无效,span

综合块级行级属性

display: inline-block



    
    Title
    


    中国
    联通
    联通
    联通

5 文字设置 

5.1 文字基本设置

  • 大小 font-size: 58px;
  • 颜色 color: #00FF7F;
  • 字体 font-family: Microsoft Yahei;
  • 加粗 font-weight: 50;

        前端CSS_第21张图片前端CSS_第22张图片

文字对齐方式

水平方向居中        text-align: center;

垂直方向居中        line-height: 59px; 文本框对应高度




    
    Title
    


    
智利

6 浮动模式

飘起来了,飞了,他飞了。没有浮动属性的在地面,会被盖住!

6.1 行内标签浮动




    
    Title


    
左边 右边

 6.2 块级标签浮动

脱离了父类,无法撑起来父类,需要增加




    
    Title
    


    
第一个
你哦啊呀

解决浮动元素对其他元素的影响

前端CSS_第23张图片 

前端CSS_第24张图片 

 7 内边距

内边距,我自己内部设置一点距离。

上下左右为统一值,则为:padding: 20px;




    
    Title
    


听妈妈的话
小朋友
行内

前端CSS_第25张图片

8 外边距 

外边距,我与别人加点距离。




    
    Title
    


    

前端CSS_第26张图片9 区域居中

margin: 0 auto;



    
    Title
    


    

10 透明度




    
    Title
    


    
你好

11 position 定位/位置

11.1 position: fixed;固定定位
11.1.1 永远在窗口的 右下角




    
    Title
    


    
吴阳军

11.1.2 居中设置




    
    Title
    


    
吴阳军

 11.1.3 全屏覆盖




    
    Title
    


    

 11.2 位置定位

  • position: relative 相当于参照物,相对定位。相对于自己添加相对属性前的位置,进行移动。
  • absolute 相当于移动物,绝对定位,相对于已经定位的父级元素进行定位。
  • 通常在使用绝对定位时,会将父级元素设置为相对定位。



    
    Title
    


    

前端CSS_第27张图片12 border 边框

border: 1px solid red
  • 1px 边框粗细
  • solid 边框样式,实线。dotted 虚线
  • red 边框颜色

        前端CSS_第28张图片前端CSS_第29张图片  

13 鼠标放上去变为小手

cursor: pointer;

页面布局Demo



	
		
		
		
		
	
	
		
		

前端CSS_第30张图片

 

你可能感兴趣的:(前端,前端,css)