• 前端开发-css


    css:

    是给html标签装饰的,变得更好看。

    注释:
    	单行注释:/*注释内容*/
    	多行注释:/*
    			注释内容
    			注释内容
    			注释内容
    			*/
    通常我们在写css代码时也会用注释来划分区域(html代码多,同样css代码也会很多)	
    比如:
    	/*顶部导航条样式*/
    	/*左侧菜单栏样式*/
    	/*右侧菜单栏样式*/
    css语法结构:
    	选择器 {
    	属性1:值1;
    	属性2:值2;
    	属性3:值3;
    	属性4:值4;
    	}
    css的三种引入方式:
    	1.style标签内部直接书写
    		    <style>
                    h1 {
                        color: chartreuse;
                    	}
                </style>
    	2.link标签引入外部css文件(最正规的方式 解耦合)
    			<link rel="stylesheet" href="my_css_file">
    	3.行内式
    		<h1 style="color: green">老大好,欠抽吗</h1>
    css的学习流程:
    	1.先学如何查找标签
    		因为后面所有的框架封装的查找语句都是基于css的
    	2.在学如何添加样式
    css选择器(基本选择器、组合选择器、属性选择器)
    基本选择器:
    	1.id选择器
    		#d1 {
            color: greenyellow;
            } 				/*找到id是d1的标签 将文本颜色变成绿黄色*/
    	2.类选择器
    		.c1 { 
            color: red;
            }				/*找到class值里面包含c1的标签*/
    	3.元素/标签选择器
                  span {
            color: red;
            }				  /*找到所有的span标签*/
    	4.通用选择器
    		* {  
            color: green;
            }				  /*将html页面上所有的标签全部找到*/
    组合选择器:
    	在前端,我们将标签的嵌套用亲戚关系来表述层级
    	    <div>div
     	        <p>div p</p>
                <p>div p
                    <span>div p span</span>
                </p>
            	<span>span</span>
            	<span>span</span>
            </div>
              div里面的p span都是div的后代
              p是div的儿子
              p里面的span是p的儿子 是div的孙子
              div是p的父亲
        1.后代选择器
        	div span {
                color: red;
            }
        2.儿子选择器
        	div>span {
                color: red;
            }
        3.毗邻选择器
        	div+span {  
                color: aqua;
            }						/*同级别紧挨着的下面的第一个*/
        4.弟弟选择器
        	div~span {  
                color: red;
                }  					/*同级别下面所有的span*/
    
    属性选择器	
    	属性选择器是以[]作为标志的
    	1.含有某个属性
    	      [username] {  
                background-color: red;
                }					
                /*将所有含有属性名是username的标签背景色改为红色*/
    	2.含有某个属性并且有某个值
        	      [username='jason'] {  
                background-color: orange;
                }					
            	/*找到所有属性名是username并且属性值是jason的标签*/
    	3.含有某个属性并且有某个值的某个标签
                  input[username='jason'] {  
                background-color: wheat;
                }						
                /*找到所有属性名是username并且属性值是jason的input标签*/
    	
    
  • 相关阅读:
    c#两级菜单menu的动态实现
    单引号写入数据库,并结合写成函数和动静态类中方法对比小结
    google地图路径查询
    c# 图像旋转
    google地图简单
    asp.net gridview 添加属性
    linq to entity Oracle 执行存储过程或函数
    c# 判断非法字符
    c# 写入文件
    google map Inspecting DirectionsResults
  • 原文地址:https://www.cnblogs.com/linqiaobao/p/12878531.html
Copyright © 2020-2023  润新知