从零开始的全栈工程师——html篇1.2

起名方式与CSS

一.起名方式(起名方式也叫选择器)

起名的目的是为了给标签添加属性

常见的3种选择器有 标签选择器   id选择器(使用的时候加#)    class选择器(使用的时候加.) 

样式的要求是由选择器的权重来决定的

标签的权重为1  class的权重是10 id的权重是100

权重是可以叠加的。

比如

 

注意给一个标签起两个名字的时候千万不要这样起:

 

要在一个class或者id属性里面直接写两个名字的属性值 在两个名字之间加一个空格来区分两个名字:

 

之前咱们说了选择器有标签名 id class 其实选择器有很多种

1.后代选择器(使用的时候在父标签名和子标签名之间加一个空格)

<p>

  段落里的文字

  <a>这里的内容就会是红色</a>

</p>

标签嵌套多层关系(包含一层)

 

2.子代选择器

<div class="pp">

  <a>这里会是红色<a>这里就不会变</a></a>

</div>

标签嵌套只有一层关系

 

3.交集选择器(给一个标签起多个名字来单独修改这条标签的样式)

<div id="p" class="aa"></div>

 
4.通配符选择器(全选)

使用通配符选择器会加大浏览器的负荷

 

5.并集选择器

 

补充:在样式属性值后面加一个!importank表示权重无限大(表示这条样式权重最大不会被修改)

 

 

 

CSS

css(层叠样式表)就是给html添加样式

网页中有四种style样式

1.行间样式 将style当做属性写在标签内。(权重1000)

 
2.行内样式 把style当做标签来用 写在head之间

 

3.外部引用(把style当做css文件来用)(在head里加一条<link type="text/css" rel="stylesheet" href="css路径">)

这里的type可以舍去因为href后面的文件名是.css会默认这条标签是css

rel和href 是必不可少的。

 

4.嵌入式(这个前期一般用不到)

就是一个css样式表里引入另一个的css样式表

 

 

 

 

 

 

 

 

 

 

 

 

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=bk1jhj&title=从零开始的全栈工程师——html篇1.2

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

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

相关文章

android开发中用到的px、dp、sp

先介绍一下这几个单位&#xff1a;px : pixels(像素),相应屏幕上的实际像素点。dip :device independent pixels&#xff0c;与密度无关的像素&#xff0c;基于屏幕密度的抽象单位。在每英寸160点的显示器上。 1dp 1px &#xff0c;即1 &#xff1a;1关系。&#xff08;dp 就是…

Spring:设置日志依赖项

这篇文章描述了如何在Spring中设置日志依赖。 它基于Dave Syer的帖子中提供的信息 。 这里提供有关Java日志记录框架的提醒。 该代码示例可在GitHub的Spring-Logging-Dependencies目录中找到。 Spring使用Jakarta Commons Logging API&#xff08;JCL&#xff09;。 不幸的是&…

【Codeforces Round #424 (Div. 2) C】Jury Marks

【Link】:http://codeforces.com/contest/831/problem/C 【Description】 有一个人参加一个比赛; 他一开始有一个初始分数x; 有k个评委要依次对这个人评分; 依照时间顺序依次给出这k个人的评分(可能为负数,负数的时候,表示分数会降低,而如果为正,则分数增加); 然后有一个…

php copy 文件夹,php删除与复制文件夹及其文件夹下所有文件的实现代码

/*复制xCopy函数用法&#xff1a;* xCopy("feiy","feiy2",1):拷贝feiy下的文件到 feiy2,包括子目录* xCopy("feiy","feiy2",0):拷贝feiy下的文件到 feiy2,不包括子目录*参数说明&#xff1a;* $source:源目录名* $destina…

安卓app开发工具_怎么开发app软件需要多少钱?主流app开发工具盘点

现在智能手机的快速普及让手机app在生活中越来越重要&#xff0c;很多企业及创业者也意识到了app的重要性&#xff0c;但是怎么开发app软件&#xff1f;有哪些主流app开发工具呢&#xff1f;这里就为大家分享一下如何快速开发app软件。一、编程app开发工具主要针对专业的程序员…

大话设计模式读书笔记(十一) 观察者模式

观察者模式&#xff1a; 书中通过小菜描述同事在公司看股票行情&#xff0c;并请求前台帮忙在老板回来时提醒同事&#xff0c;引出需求。将前台通知同事老板回来的事写成程序。未用模式实现&#xff1a; 1 //前台类2 public class Secretary {3 private List<StockObser…

解决高度塌陷

<!DOCTYPE html> <html lang"en" dir"ltr"><head><meta charset"utf-8"><title>高度塌陷解决</title><style media"screen">.box1{border: 10px #bfc993 solid;}.box2{width: 100px;height…

IBM AIX:Java进程大小监视

本文将为您提供有关如何计算在IBM AIX 5.3 OS上运行的Java VM进程的Java进程大小内存占用量的快速参考指南。 这是我关于该主题的原始文章的补充文章&#xff1a; 如何在AIX上监视Java本机内存 。 我强烈建议所有参与生产支持或AIX上部署Java应用程序开发的人员阅读此书。 为…

java 饥饿现象,Java单例模式、饥饿模式代码实例

class MyThreadScopeData {// 单例private MyThreadScopeData() {}// 提供获取实例方法public static synchronized MyThreadScopeData getThreadInstance() {// 从当前线程范围内数据集中获取实例对象MyThreadScopeData instance map.get();if (instance null) {instance n…

12. 抽象与密封

一、抽象类与抽象方法 1、抽象类与抽象方法声明&#xff1a; 抽象类&#xff1a;在面向对象的概念中&#xff0c;所有的类都是通过对象来描述&#xff0c;但并不是所有的类都用来描述对象。如果一个类中没有足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。  …

pstate0 vid数值意义_天体运动的简单数值计算

&#xff08;建议阅读全文&#xff09; 预备知识 万有引力&#xff0c; 弹簧振子受迫运动的简单数值计算    下面我们来用一种极其简单的算法对单个天体在中心天体的万有引力作用下的运动进行数值计算&#xff0e; 事实上该问题存在解析解&#xff08;见开普勒三定律&#x…

集合框架

集合框架包含的内容&#xff1a; 集合框架的接口&#xff1a; List接口实现类 ArrayList 1 package com.jredu.ch01;3 import java.util.ArrayList;5 import java.util.List;7 public class ArrayListTest {9 public static void main(String[] args) { 10 // TODO…

使用CSS实现无滚动条滚动

我们都知道&#xff0c;撸页面的时候当我们的内容超出了我们的div&#xff0c;往往会出现滚动条&#xff0c;影响美观。 尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。 我们不希望出现滚动条&#xff0c;也不希望超出去的内容被放逐&#xff0c;就要保留…

Java中的类型安全的空集合

我之前曾在Java Collections类的实用程序上进行过博客撰写&#xff0c;并且特别地在使用Usings Collections Methods上的博客emptyList&#xff08;&#xff09;&#xff0c;emptyMap&#xff08;&#xff09;和emptySet&#xff08;&#xff09;上进行了博客撰写。 在本文中&a…

php cpu mac,PHP 获得计算机的唯一标识[CPU,网卡 MAC地址]

//获取电脑的CPU信息function OnlyU(){$a ;$b array();if(function_exists(exec)){if(mailto:!exec( /all",$b)){return false;}}elseif(function_exists(system)){ob_start();if(mailto:!system( /all")){return false;}else{}$b ob_get_contents();ob_end_clean…

剑指offer二十二之从上往下打印二叉树

一、题目 从上往下打印出二叉树的每个节点&#xff0c;同层节点从左至右打印。 二、思路 二叉树的层次遍历&#xff0c;可以借助队列实现。具体思路详见注释。 三、代码 import java.util.ArrayList; import java.util.LinkedList; /** public class TreeNode {int val 0;Tree…

arduino i2c 如何写16位寄存器_arduino入门

硬件&#xff1a;Arduino Uno是基于ATmega328P(数据表)的微控制器板。它具有14个数字输入/输出引脚(其中6个可用作PWM输出)&#xff0c;6个模拟输入&#xff0c;工作电压5v&#xff0c;输入电压7-12v。串行&#xff1a;0(RX)和1(TX)用于接收(RX)和发送(TX)TTL串行数据。这些引脚…

原生JS实现banner图的滚动与跳转

HTML部分&#xff1a; <div id"banner"><!--4张滚动的图片--><div id"inside"><img src"../../img/14072415363339_0.jpg"><img src"../../img/14072415383924_0.jpg" id"img2" /><img sr…

Java中的紧凑堆外结构/组合

在上一篇文章中&#xff0c;我详细介绍了代码对主内存的访问方式的含义。 从那时起&#xff0c;我对使用Java可以做什么以实现更可预测的内存布局有很多疑问。 有些模式可以使用数组支持的结构来应用&#xff0c;我将在另一篇文章中讨论。 这篇文章将探讨如何模拟Java中非常缺少…

java字符集编码是,java字符集与编码有关问题

java字符集与编码问题没想到自己的第一篇javaeye博客就是让人头痛的java字符集转码问题&#xff0c;下面是我个人的一些认识与网上收集的代码。在java中String在JVM里是unicode的&#xff0c;任何byte[]到String以及String到byte[]都涉及到字符集编码转换。基本规则是&#xff…