起名方式与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样式表

从零开始的全栈工程师——html篇1.2的更多相关文章

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

    全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块 HTML篇 html(超文本标记语言,标记通用标记语言下的一个应用.) “超文本”就是指页面内可以包含图片.链接,甚至音乐 ...

  2. 从零开始的全栈工程师——js篇2.5

    数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单 ...

  3. 从零开始的全栈工程师——js篇2.1(js开篇)

    JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页 ...

  4. 从零开始的全栈工程师——html篇1.7

    position定位与表单 一.position 1.Position细说 Position:relative; Left:100px; Top:100px; Position:absolute; L ...

  5. 从零开始的全栈工程师——html篇1.5

    列表与边距探讨和行块 一.列表 1.无序列表(UL) 1)内部必须有子标签<li></li>2)天生自带内外边距 p也是自带 大家会发现用UL的时候内容前面会出现一个像这样的一 ...

  6. 从零开始的全栈工程师——html篇1.4

    背景与边框 一.背景(backgound) 1.背景颜色:background-color:red;(简写:background:color;) 备注:ie9以下给body设置background-c ...

  7. 从零开始的全栈工程师——html篇1.3

    文本.字体css样式与前期英语单词汇总 一.文本样式(text) 1.颜色:color:red; 2.文本对齐方式:text-align:left/center/right/justify; left ...

  8. 从零开始的全栈工程师——PHP篇 ( 单词汇总 ) ( php解决文字乱码 )

    解决乱码: header("Content-Type: text/html;charset=utf-8"); 单词 局部的: local 全局的: global 静态的: stat ...

  9. 从零开始的全栈工程师——js篇(cookie)

    Cookie是由服务器端生成,发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器,对cookie知识感兴 ...

随机推荐

  1. 【离散数学】 SDUT OJ 哪款赛车最佳?

    哪款赛车最佳? Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 四名专家对四款赛车进行 ...

  2. 理解Javascript_02_执行上下文01

    执行上下文又名执行上下文环境 JS中为什么会产生这个概念呢,先来看一下下面的这段代码: 通过执行发现,第一句代码报了ReferenceError,第二句和第三句代码是undefined,由于undef ...

  3. asp.net 同时执行js事件和代码事件 导出 excel

     onclick="return bnQuery_onclick()" onserverclick="bnQuery_ServerClick"   public ...

  4. gym101964G Matrix Queries seerc2018g题 数学归纳法+线段树(递归)

    题目传送门 题目大意: 给出2^k大小的白色矩形,q次操作,每次将一行或者一列颜色反转,问总体矩阵的价值,矩阵的价值定义是,如果整个矩阵颜色相同,价值为1,否则就把这个矩阵切成四份,价值为四个小矩阵的 ...

  5. 1144G Two Merged Sequences ( 贪心+构造)

    题目:https://codeforces.com/problemset/problem/1144/G 题意: 将一个序列分成两个序列,两个序列中元素的相对顺序保持和原序列不变,使得分出的两个序列一个 ...

  6. img的事件

    <img src="../images/clock.jpg" onload=alert('加载成功'); onerror=alert("加载失败");/& ...

  7. POJ - 1961 最小循环节

    如果循环节存在那在前缀部分也肯定存在 如果循环节存在那至少是可以匹配的 而next是维护最大前缀的,意会意会 注意一定要先判整除,即使别的题目保证是存在循环的 特意画了一张灵魂草图帮助理解 #incl ...

  8. 再谈java枚举 ENUM

    [From] http://www.cnblogs.com/rollenholt/archive/2012/11/27/2790402.html 没有枚举之前: 在没有枚举之前,我们想列举一些相关的常 ...

  9. n个骰子的和,组成数字m的可能

    //n个骰子的和,组成数字m的可能 function f(n,m) { if(n==1){ return 1; } var len=m-n; var sum=0; while (len>=0){ ...

  10. 字典树+map

    Problem Description Carryon最近喜欢上了一些奇奇怪怪的字符,字符都是英文小写字母,但奇怪的是a可能比b小,也可能比b大,好奇怪.与此同时,他拿到了好多的字符串,可是看着很不顺 ...