CSS样式的4种写法 | 以及选择器的几种用法
CSS样式:
1.内部样式表
<style type="text/css">
样式表写法
</style>
2.使用link标签,在文档中声明使用外接资源,最常用的一种方式。(推荐)
<link type="text/css" rel="stylesheet" href="文件路径" />
3.@方式,引入css,注意这个是异步加载的,在整个html加载之后才加载,会导致页面闪烁。不推荐使用。
<style>
@import url("文件路径");
</style>
4.内联样式表(行内样式表),优先级最高最直白,但不能复用不容易维护。
<input type="text" style="color:0x550;font-size:30px;"/>
优先级: 行内样式 > 内部样式 > 外部样式
选择器:
1、 标签选择器: 语法:标签名
标签名: 选取相同的所有标签
2、 类选择器: 语法: .class的值
每一个标签添加class属性, 类, 不同标签拥有相同的class,
注意: 标签怎么添加多个class, class属性值 多个class值用空格分隔
3、 id选择器 语法: #id的值
每一个标签添加一个id属性, 要求id的值唯一,
4、 组合选择器:
A) 并集选择器: (或者) 选择器1, 选择器2, 选择器3,....
B) 交集选择器:(并且) 选择器1 选择器2
注意: 选择器1 只能是标签选择器
选择器2: 只能是id选择器或者类选择器
(例如 p标签.class的值#div的值 或者 p标签#div的值.class的值 )
C) 后代选择器: (儿子,孙子,.....) 选择器1 选择器2 .......
D) 全选择器: *
优先级: 标签选择 < 类选择器 < ID选择器
CSS样式的4种写法 | 以及选择器的几种用法的更多相关文章
- controller 有两种写法,讨论一下两种写法的区别:
controller 有两种写法,讨论一下两种写法的区别: 写法 1: app.controller('myCtrl', function($scope, $location) { $scope.my ...
- js中css样式兼容各个浏览器写法
在实际业务中往往需要在js中对dom添加一些样式,还需要对各个浏览器厂商的兼顾,看到一位大神写的一个方法很赞,做一个笔记 function prefixStyle(style){ var eleSty ...
- 委托的N种写法,你喜欢哪种?
一.委托调用方式 1. 最原始版本: delegate string PlusStringHandle(string x, string y); class Program { static void ...
- (转)委托的N种写法,你喜欢哪种?
原文:http://www.cnblogs.com/FreeDong/archive/2013/07/31/3227638.html 一.委托调用方式 1. 最原始版本: delegate strin ...
- 【转】委托的N种写法,你喜欢哪种?
一.委托调用方式 1. 最原始版本: delegate string PlusStringHandle(string x, string y); class Program { static void ...
- CSS样式之选择器
一.CSS选择器构成 CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签 ...
- CSS样式总结(作业六)
1:CSS基本介绍 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. css 样式由选择符 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- Android代码规范----按钮单击事件的四种写法
[前言] 按钮少的时候用第三种的匿名内部类会比较快,比如写demo测试的时候或者登陆界面之类. 按钮多的时候一般选择第四种写法. 一.第一种写法:在XML文件中声明onClick属性(很少用) 在XM ...
随机推荐
- Flex实现九宫格
写一个靠谱的flex布局 <!DOCTYPE html> <html> <style> .block { padding-top: 30%; margin-top: ...
- nowcoder 135F 圆
链接:https://www.nowcoder.com/acm/contest/135/F来源:牛客网 圆(circle) 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 3276 ...
- python数据分析工具 | pandas
pandas是python下强大的数据分析和探索工具,是的python在处理数据时非常快速.简单.它是构建在numpy之上的,包含丰富的数据处理函数,支持时间序列分析功能,支持灵活处理缺失数据. pa ...
- webpack的loader和plugin的区别
[Loader]:用于对模块源码的转换,loader描述了webpack如何处理非javascript模块,并且在buld中引入这些依赖.loader可以将文件从不同的语言(如TypeScript)转 ...
- [C++入门篇]了解C++
前言 我是杨某人,点击右下方"+"一键关注我.如果你喜欢我的文章,那么拒绝白嫖行为.然后..请多来做客鸭. 如果你是已经入门的大佬,请滑到下方点个推荐再走. 我个人认为,博客有两种 ...
- NLP(二十六)限定领域的三元组抽取的一次尝试
本文将会介绍笔者在2019语言与智能技术竞赛的三元组抽取比赛方面的一次尝试.由于该比赛早已结束,笔者当时也没有参加这个比赛,因此没有测评成绩,我们也只能拿到训练集和验证集.但是,这并不耽误我们在这 ...
- 基于 HTML + WebGL 结合 23D 的疫情地图实时大屏 PC 版
前言 2019年12月以来,湖北省武汉市陆续发现了多例肺炎病例,现已证实为一种新型冠状病毒感染引起的急性呼吸道传染病并蔓延全国,肺炎疫情牵动人心,人们每天起来第一件事变成了关注疫情进展,期望这场天灾早 ...
- 结题报告--洛谷P3915
题目:点此. 我处理这种多组数据的方法被我叫做“mains法”,就是先假设只有一组数据,写一个代码,然后把那个main函数改成mains,最后写一个真正的main函数. 这个“真正的”main函数一般 ...
- iview-admin里面的 axios 给包装了一层数据 libs/axios.js 数据做了一层拦截
interceptors (instance, url) { // 请求拦截 instance.interceptors.request.use(config => { // 添加全局的load ...
- Core + Vue 后台管理基础框架7——APM
1.前言 APM,又称应用性能统计,主要用来跟踪请求调用链,每个环节调用耗时,为我们诊断系统性能.定位系统问题提供了极大便利.本系统采用的是Elastic Stack体系中的APM,主要是之前部门搞P ...