zoukankan      html  css  js  c++  java
  • 前端内容整理(二)

    本章内容 CSS

    一、css注释

    css一般是独立的文件。
    注释写法:/*注释内容*/
    注释格式:
    /*这是首页的css样式文件*/
    /*页面通用样式*/
    /*顶部导航条样式*/
    /*侧边菜单栏样式*/
    

    二、css语法结构

    选择器{属性名1:属性值1;
    	 属性名2:属性值2;
    }
    

    三、css的引入方式

    1.外部css文件
    <link rel="stylesheet" herf="mycss.css">
    2.head内style标签内部直接书写css代码
    
    3.标签内部通过style属性直接书写
    

    四、选择器的分类

    1.基本选择器
    标签选择器:选择所有p标签
    	p {
    	color:red;
    }
    -----------------------------------------
    id选择器:选择所有id=‘id_user’的标签
    	#id_user{
    	color:red;
    }
    -----------------------------------------
    (class)类选择器:选择所有class=‘cls’的标签
    	.cls{
    	color:red
    }
    -----------------------------------------
    通配选择器:选择所有的标签
    *{
    	color:red
    }
    
    2.组合选择器
    后代选择器:用空格表示,选择div内的所有span标签
    div span{
    	color:red;
    }
    ---------------------------------------------------
    子代选择器:用>表示,选择div内一个层级的span标签
    div>span{
    	color:read
    }
    ---------------------------------------------------
    毗邻选择器:用+表示,div紧挨着的下一个标签(span)
    div + span{
    	color:red;
    }
    ----------------------------------------------------
    弟弟选择器:用~表示。div下面统计的所有span标签
    div ~span{
    	color:red;
    }
    -----------------------------------------------------
    
    3.属性选择器
    属性选择器:选择页面上所有具有board属性的标签
    [board]{
    	color:red;
    }
    找到具有属性board并且值为‘out’的标签
    [board='out']{
    	color:red;
    }
    找到input中具有属性board且值为‘out’的标签
    input[board='out']{
    	color:red;
    }
    
    4.分组嵌套
    div,p,span{
    	color:red;
    }
    .c1,#d1,p{
    	color:red;
    }
    .c1 h1{
    	color:green;
    }
    选择器可以组合嵌套使用。
    
    5.伪类选择器
    a:link{
    	color:red;
    }
    a:hover{
    	color:red;
    }
    a:active{
    	color:red;
    }
    a:visited{
    	color:gray
    }
    input:focus{
    	background-color:red;
    }
    
    6.伪元素选择器
    p:before{
    	content:'AAA';
    	color:red;
    }
    p:after{
    	content:'?';
    	color:blue;
    }
    p:first-letter{
    	color:red;
    	font-size:48px;
    }
    
  • 相关阅读:
    Maven安装
    Linux登录欢迎图案
    GC的性能指标和内存容量配置原则
    java堆结构和垃圾回收
    框架设计知识点纵览(笔记)
    .net core在Linux本地化Localization的一次填坑
    .Net Identity OAuth 2.0 SecurityStamp 使用
    CentOS 7 安装. Net Core SDK 2.0
    Docker基本命令与使用 —— Docker容器的网络连接(四)
    Docker基本命令与使用 —— Dockerfile指令与构建(三)
  • 原文地址:https://www.cnblogs.com/Ghostant/p/12102818.html
Copyright © 2011-2022 走看看