初始CSS

一.引入样式
 
 1.行内样式表
  <h1 style="color: red;font-size: 18px;">10-30</h1>
  
 2.内部样式表(在head标签里面,title标签下面)
  <style type="text/css">
   h2{
    color: yellow;
    font-size: 20px;
   }
  </style>
  优点
   方便在同页面中修改样式
  缺点
   不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
3.外部样式表
  嵌入式
   <link href="../css/index.css" rel="stylesheet" type="text/css"/>
  导入式
   <style type="text/css">
    @import "../css/index.css";
   </style>
  嵌入式和导入式的区别:
   1.<link/>标签属于XHTML,@import是属于CSS2.1
   2.使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
   3.使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中
   4.@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
   
 4.样式优先级
  行内>内部>外部
  就近原则
  
二.基本选择器
 
 1.标签选择器(通过标签名称定位)
  h2{
            color: red;
        }
  
 2.类选择器(通过标签中class属性的值定位,值可以重复,不能以数字开头)
  .class01{
            color:yellow;
        }
  <h2 class="class01">10-30</h2>
  <h1 class="class01">10-31</h1>
  
 3.ID选择器(通过标签中id属性的值定位,值不可以重复,不能以数字开头)
   #id01{
            color: red;
        }
  <h2 id="id01">10-30</h2>
  <h1 id="id02">10-31</h1>
  
 4.基本选择器的优先级
  不遵循就近原则,无论哪一种样式表的导入,都遵循:id选择器>类选择器>标签选择器
  
三.高级选择器
 
 1.层次选择器
   /*后代选择器*/
        li p{
            background-color: yellow;
        }
        /*子选择器*/
        body>p{
            background-color: aqua;
        }
        /*相邻兄弟*/
        .class01+p{
            background-color: red;
        }
        /*通用选择器*/
        .class01~p{
            background-color: blue;
        }
 
 2.结构伪类选择器
 
  ul li:first-child{
            background-color: yellow;
        }
        ul li:last-child{
              background-color: red;
        }
        ul li:nth-child(even){
            background-color: blue;
        }
  /*匹配元素类型*/
        p:first-of-type{
            background-color: pink;
        }
        p:last-of-type{
            background-color: green;
        }
        p:nth-of-type(3){
            background-color: aqua;
        }
 
 3.属性选择器
  /*包含id属性*/
  a[id]{
            background-color: red;
        }
  /*包含target属性,并且值为_blank*/
        a[target=_blank]{
            background-color: yellow;
        }
  /*包含title属性,并且值以we开头*/
        a[title^=we]{
            background-color: aqua;
        }
  /*包含title属性,并且值以e结尾*/
        a[title$=e]{
            background-color: black;
        }
  /*包含class属性,并且值包含it*/
        a[class*=it]{
            background-color: blue;
        }
  
 

转载于:https://www.cnblogs.com/cw172/p/9883360.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/426536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java学习(50):子类继承会优先调用父类的构造器

定义一个父类 public class Parent { public void run(){ System.out.println(“我会跑步”); } public Parent(){ System.out.println(“我是爸爸”); } } 定义一个子类 public class Son extends Parent { public Son(){ System.out.println(“我是儿子”); } } 定义一个测试…

java去除不为null,java – 选择特定字段不为NULL的所有记录

我有一个名为stars的MySQL表,其中一个字段是id_num,默认值为NULL.我想通过java中的PreparedStatement选择id_num不为NULL的所有记录.现在我正在尝试这个&#xff1a;private final String idStarsSQL "select * from stars where id_num is not ?";...preparedStat…

Get Requests with Json Data Get Requests with Url Parameters

转载于:https://www.cnblogs.com/chengchengla1990/p/9883536.html

java学习(51):上转型对象

定义一个animal类 //java上转型对象 public class Animal { public String name“动物”; public String getName(){ return name; } public void action(){ System.out.println(“动物都在我的分类之中”); } public void feature(){ System.out.println(“我们都很帅气”); }…

php100教程源码,PHP100 视频教程 2012-2013版_PHP教程

教程名称&#xff1a;PHP100 视频教程 2012-2013版《PHP100系列视频教程》从2008年至今共计发布了近200多期的视频教程&#xff0c;涉及了WEB开发和php开发的方方面面&#xff0c;也是互联网中设计PHP开发最全面的教程系列。我们的教程就是让人人都可以学会WEB开发和PHP程序设计…

数组排序并找出元素索引--Where do I belong-FCC

数组排序并找出元素索引 先给数组排序&#xff0c;然后找到指定的值在数组的位置&#xff0c;最后返回位置对应的索引。 举例&#xff1a;where([1,2,3,4], 1.5) 应该返回 1。因为1.5插入到数组[1,2,3,4]后变成[1,1.5,2,3,4]&#xff0c;而1.5对应的索引值就是1。 同理&#xf…

java学习(52):抽象类

//定义一个人的抽象类 public abstract class Person { public abstract void eat();//吃饭 public abstract void drink();//喝水 public abstract void play();//玩 } //定义一个富人的抽象类 public abstract class Rich extends Person{ public abstract void buy();//买 p…

php 汉字分割,php支持中文字符串分割的函数

str_split不支持中文&#xff0c;利用mb_xx函数实现个/*** Convert a string to an array* param string $str* param number $split_length* return multitype:string*/function mb_str_split($str,$split_length1,$charset"UTF-8"){if(func_num_args()1){return pr…

python中使用正则模板匹配结果

正则配置处理类文件 util_tool.py #!/usr/bin/env python# -*- coding: utf-8 -*-"""Util Module for functionality shared between modules"""import redef combine_dicts(recs): """Combine a list of recs, appending val…

玩转oracle 11g(8):使用profile管理用户口令

使用profile管理用户口令 概述&#xff1a;profile是口令限制&#xff0c;资源限制的命令集合&#xff0c;当建立数据库的&#xff0c;oracle会自动建立名称为default的profile。当建立用户没有指定profile选项&#xff0c;那么oracle就会将default分配给用户。 1.账户锁定 概述…

RegexDemo6

package cn.zzDemo;/** 转换功能&#xff1a;* String类的public String replaceAll(String regex,* String replacement)使用给定的 replacement 替换此字符串所有匹配给定的正则表达式的子字符串。 */public class RegexDemo6 {public static void main(String[] args) {// 定…

玩转oracle 11g(9):crud操作(亲测)

oracle支持的数据类型 字符类 char 定长 最大2000个字符。 例子&#xff1a;char(10) ‘小韩’前四个字符放‘小韩’&#xff0c;后添6个空格补全 如‘小韩’ varchar2(20) 变长 最大4000个字符。 例子&#xff1a;varchar2&#xff08;10&#xff09; ‘小韩’ oracle分配四个…

自己的路 php,生活感悟的句子:走自己的路,做自己的事

1、生活感悟的句子&#xff1a;当坚强成为你唯一的选择&#xff0c;你才知道自己可以有多坚强。别总把悲伤挂在脸上&#xff0c;每个人都有自己的故事&#xff1b;别把苦恼挂在嘴边&#xff0c;每个人都有自己的烦脑。这世界会打击每一个人。但经历过后&#xff0c;许多人会在受…

项目管理(1):备战pmp

1什么是项目  一家公司被收购  海外建设通讯站点  研究院研发一种新型的药物  中国当局缉拿新疆针刺袭击嫌疑人  野生动物湿地保护区的建立  与朋友一起旅游  房屋装修  ………………请问哪些是项目&#xff1f; 2项目的发展历程  1900年代早期&#xff0c;H…

神经网络中使用Batch Normalization 解决梯度问题

BN本质上解决的是反向传播过程中的梯度问题。 详细点说&#xff0c;反向传播时经过该层的梯度是要乘以该层的参数的&#xff0c;即前向有&#xff1a; 那么反向传播时便有&#xff1a; 那么考虑从l层传到k层的情况&#xff0c;有&#xff1a; 上面这个 便是问题所在。因为网络…

基于matlab的图像分割,基于MATLAB的图像分割算法研究毕业论文

作者姓名 XXX学号指导教师 XX教授学科专业 计算机科学与技术所在学院 计算机学院提交日期结 论数字图像目标分割与提取是数字图像处理和计算机视觉领域中一个备受关注的研究分支&#xff0c;也是图像处理领域的一个经典难题。经过近二十年的不断研究和探讨&#xf…

项目管理(2):备战pmp

1项目阶段与项目生命周期 将每一个项目划分为若干个阶段&#xff08;phases&#xff09;&#xff0c;以便提高管理控制&#xff0c;并提供与该项目实施组织的日常运作之间的联系 这些阶段合在一起称为项目生命周期 项目的生命周期用于定义一个项目的开始和结束 许多组织识别出一…

2018-2019-1 20189213《Linux内核原理与分析》第四周作业

《Linux内核原理与分析》第四周学习总结&#xff1a; 1.课本知识总结&#xff1a; 本章内容并不多&#xff0c;首先是介绍了一些Linux内核源代码的目录结构&#xff0c;并基于Linux内核源代码构造一个简单的操作系统MenuOS&#xff0c;同时在MenuOS启动过程中跟踪分析Linux内核…

matlab窗函数带通滤波器,Matlab结合窗函数法设计数字带通FIR滤波器

Matlab结合窗函数法设计数字带通FIR滤波器 课程设计任务书学生姓名&#xff1a; 专业班级&#xff1a; 通信工程 指导教师&#xff1a; 工作单位&#xff1a; 信息工程学院 题 目:利用 Matlab 仿真软件系统结合窗函数法设计一个数字带通 FIR 滤波器初始条件&#xff1a; 1.《数…

java学习(53):接口的定义和创建

定义一个computer类 package com.company; public interface computer{ /定义公告&#xff0c;静态&#xff0c;常量/ public static final int MAX_NUM5000; /接口中只允许定义公共的抽象方法/ public abstract double couunt(double num1,double num2,char tag); } 定义一个…