前端之 CSS🤖
css (层叠样式表) : 对html标签的渲染和布局
- 查找 (选择器)
- 操作标签 (属性操作)
导入用 link 标签,后面的href就用你的文件路径就好
写css文件,要单独写到一个文件里面去
推荐 : 链接式
1. 行内式 :
<p style='background-color: black'>hello doubi </p>
2. 嵌入式 : 嵌入式是将CSS样式几种写在网页的<head></head>标签对的<style></style>标签对中. 格式如下:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3. 链接式 : 将一个.CSS文件引入到HTML文件中
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
二. css的选择器(Selector)
'选择器'指明了{}中的'样式'的作用对象,也就是'样式'作用于网页中的哪些元素.
一 .基本选择器
标签选择器 : p{}
id选择器 : #i1{}
class选择器 : .c1{} !!!常用
统配选择器 : *{}
二 .组合选择器
后代选择器
.c2 p{
color : red;
}
所有属于c2类后代的p标签都使用这个样式. 用 空格
子代选择器
.c2>p{
color : red;
}
所有属于c2类的子元素p标签适用. 只适用子元素,孙子元素不能用,兄弟元素也不行. 用>.
毗(pi)邻选择器 :
.c2+p{
color : red;
}
紧随.c2之后的所有同级p标签. 用+.
兄弟选择器 :
.c2~p
##标签嵌套 : 块级元素可以嵌套内联元素或者某些块级元素.但!!!内联元素不可以嵌套块级元素,它只能包含其他内联元素. 再注意 : p标签不可以包含块级元素.
三 .属性选择器 :
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略。
比如“[cheacked]”。以下同。) p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
四 .选择器的优先级 :
继承是css的一个主要特征,依赖于祖先>后代的关系.
!!! 任何显示申明的规则都可以覆盖其继承样式。
!!! 有一些属性不能被继承,如:border, margin, padding, background等。
###CSS的优先级 :
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""---1000;
2 统计选择符中的ID属性个数。 #id ---100
3 统计选择符中的CLASS属性个数。 .class ---10
4 统计选择符中的HTML标签名个数。 p ---1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
前端之 CSS🤖的更多相关文章
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- 前端之css
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 第二篇:web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- Scala入门系列(七):面向对象之继承
extends 与Java一样,也是使用extends关键字,使用继承可以有效复用代码 class Person { private var name = "leo" def ge ...
- Swift 线程安全数组
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:BigNerdCoding 有并发的地方就存在线程安全问题,尤其是对于 Swift 这种还没有内置并发支持的语言来说线程安全问题更为突出 ...
- Relax信息学题库须知
Relax信息学题库须知 1.本题库于2017.10.15开始建设(建设中),私聊我便可成为题库管理员,关注我即可成为题库成员.我的QQ:2026503022,微信:dy060207. 2.本题库的建 ...
- C# RichTextBox设置行间距
之前从CSDN上下载了一个代码,参看之后,改了一些内容,感觉设置行间距更具体,不会因为字号的变化而受到影响,具体代码参看: CSDN:http://download.csdn.net/detail/n ...
- labview生成可执行文件
labview生成可执行文件可以分为两种情况. 第一种,是电脑中有labview软件开发环境的情况 第二种,是电脑中没有安装labview软件开发环境 下面是一个简单的labview代码: 程序解释: ...
- C# 修改DataTable列 类型 并从新赋值
DataTable dt = ds.Tables[]; DataTable dtResult = new DataTable(); //克隆表结构 dtResult = dt.Clone(); for ...
- nginx利用反向代理调试后台接口
1.location 支持配置项目的绝对路径 2.假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样 ...
- 小白的Python之路 day2 字符串操作 , 字典操作
1. 字符串操作 特性:不可修改 name.capitalize() 首字母大写 name.casefold() 大写全部变小写 name.center(50,"-") 输出 '- ...
- 单点登录cas常见问题(十四) - ST和TGT的过期策略是什么?
ST和TGT的过期策略能够參看配置文件:ticketExpirationPolicies.xml 1.先说ST:ST的过期包含使用次数和时间,默认使用一次就过期,或者即使没有使用.一段时间后也要过期 ...
- url_for()中的坑,url_for操作对象是函数,而不是route里的路径
url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径.
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
extends 与Java一样,也是使用extends关键字,使用继承可以有效复用代码 class Person { private var name = "leo" def ge ...
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:BigNerdCoding 有并发的地方就存在线程安全问题,尤其是对于 Swift 这种还没有内置并发支持的语言来说线程安全问题更为突出 ...
Relax信息学题库须知 1.本题库于2017.10.15开始建设(建设中),私聊我便可成为题库管理员,关注我即可成为题库成员.我的QQ:2026503022,微信:dy060207. 2.本题库的建 ...
之前从CSDN上下载了一个代码,参看之后,改了一些内容,感觉设置行间距更具体,不会因为字号的变化而受到影响,具体代码参看: CSDN:http://download.csdn.net/detail/n ...
labview生成可执行文件可以分为两种情况. 第一种,是电脑中有labview软件开发环境的情况 第二种,是电脑中没有安装labview软件开发环境 下面是一个简单的labview代码: 程序解释: ...
DataTable dt = ds.Tables[]; DataTable dtResult = new DataTable(); //克隆表结构 dtResult = dt.Clone(); for ...
1.location 支持配置项目的绝对路径 2.假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样 ...
1. 字符串操作 特性:不可修改 name.capitalize() 首字母大写 name.casefold() 大写全部变小写 name.center(50,"-") 输出 '- ...
ST和TGT的过期策略能够參看配置文件:ticketExpirationPolicies.xml 1.先说ST:ST的过期包含使用次数和时间,默认使用一次就过期,或者即使没有使用.一段时间后也要过期 ...
url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径. url_for操作对象是函数,而不是route里的路径.