CSS【03】：CSS 基础选择器与三种引入方式
基础选择器
- 选择器：css 选择 html 标签的一个工具，是将 css 与 html 建立起联系，那么 css 就可以控制 html 样式
- 选择器其实就是给 html 标签起名字
标签选择器
作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
格式：
标签名称 {
属性: 值;
}
注意点：
- 标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
- 标签选择器无论标签藏得多深都能选中
id选择器
作用：根据指定的 id 名称找到对应的标签，然后设置属性
格式：
#id名称 {
属性: 值;
}
注意点：
- 每个 HTML 标签都有一个属性叫做 id，也就是说每个标签都可以设置 id
- 在同一个界面中 id 的名称是不可以重复的
- 在编写 id 选择器时一定要在 id 名称前面加上 #
- id 的名称是有一定的规范的
- id 的名称只能由字母、数字、下划线组成（a-z 0-9 _）
- id 名称不能以数字开头
- id 名称不能是 HTML 标签的名称，不能是（a h1 img input ...）
- 在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中 id 一般留给 js 使用的
类选择器
作用：根据指定的类名称找到对应的标签，然后设置属性
格式：
.类名 {
属性: 值;
}
注意点：
- 每个 HTML 标签都有一个属性叫做 class，也就是说每个标签都可以设置类名
- 在同一个界面中 class 的名称是可以重复的
- 在编写 class 选择器时一定要在 class 名称前面加上
. - 类名的命名规范和 id 名称的命名规范一样
- 类名就是专门用来给 CSS 设置样式的
- 在 HTML 中每个标签可以同时绑定多个类名
CSS三种引入方式
行间式
<div style="width: 100px; height: 100px">
</div>
<!-- 简单直接,针对性强 -->
- 样式书写在标签的 style 全局属性中
- 样式格式为
key: value(单位) - 以
;隔开多个样式，最后的;可以省略
内联式
<head>
<style>
选择器 {
width: 100px;
height: 100px;
}
</style>
</head>
<!-- 解耦合了,可读性强 -->
- 样式书写在 head 标签内的 style 标签中
- 样式格式为
选择器 { 样式块 } - 样式块
key: value(单位)
外联式
/* index.css文件 */
选择器 {
width: 100px;
height: 100px;
}
/* 适合团队高效率开发, 耦合性低, 复用性强 */
<!-- index.html -->
<link rel='stylesheet' type='text/css' href='./index.css'>
- 样式书写在外部 css 文件中，不需要写任何标签
- 样式格式为
选择器 { 样式块 } - 样式块
key: value(单位) - 以
;隔开多个样式，最后的;可以省略
三种引入"优先级"分析
1. 没有优先级
2. 不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的
3. 行间式一定是逻辑最下方的样式
CSS【03】：CSS 基础选择器与三种引入方式的更多相关文章
- js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
随机推荐
- 向comboboxEdit中动态添加数据库中保存的用户自定义单位制的名称
if (radioGroup1.SelectedIndex == 2) { bool _Flag = true; sm.SetLciVisible(lciDelete, _Flag); sm.SetL ...
- Java基础学习笔记十九 File
IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...
- linux中时间命令详解
DATE hling@hling:~$ date2018年 04月 11日 星期三 19:43:04 CSThling@hling:~$ date +%Y%M%d20184311hling@hling ...
- Python学习之旅（九）
Python基础知识(8):集合 集合:由不同元素组成,无序的,不重复的序列 补充知识:可变类型:列表.字典:不可变类型:数字.字符串.元组 使用大括号{}或set()方法定义集合 se=set(&q ...
- Mybatis连接配置文件详解
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE configurationPUBLIC &q ...
- yii js
页面url拼接以及页面跳转 var baseUrl = '<?php echo Yii::$app->request->baseUrl ?>';var url = baseUr ...
- [No000018A]改善C#程序的建议11-20
建议11:区别对待 == 和Equals CLR中将“相等性”分为两类:1.值相等性:两个变量包含的数值相等.2.引用相等性:两个变量引用的是内存中的同一个对象. 但并不是所有的类型的比较都是按照其本 ...
- 从session中获取当前用户的工具类
package cn.crmx.crm.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.Ht ...
- 《linux就该这么学》第八节课：第六章存储结构与磁盘划分
笔记 (借鉴请修改) 6.3.文件系统与数据资料 目前linux最常见的文件系统: ext3:日志文件系统.宕机时可自动恢复数据资料,容量越大恢复时间越长,且不能保证百分百不丢失. ext4:e ...
- qt 安装包生成2
使用Qt Installer Framework制作安装包 2018年07月01日 03:45:37 大黄老鼠 阅读数:878 标签: qt更多 个人分类: Qt 版权声明:本文为博主原创文章,未 ...