day45_9_4前端（2）css
一。css的三种css导入：
1.在标签中内部定义（不推荐）。
2.在head中的style总定义样式。
3.使用link链接外部的css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试css</title>
<link rel="stylesheet" href="newcss.css">
<style>
p {
color: blueviolet;
} </style>
</head>
<body>
<p style="color: blue">测试三种选择器</p>
</body>
</html>
css的演示
其中的作用优先级是1》2》3。
二。四种基本选择器：
1.标签选择器（仅限这个标签下的格式）
p {
color: blueviolet;
}
指定一个标签，将所有的标签都改为该样式。
2.id选择器
#d1{
color:yellow;
}
将这个id下的格式改为该样式。
3.类选择器
.p1{
color: coral;
}
将定义了该类名的所有类都变成该格式。
4.全局选择器
*{
color:coral;
}
将该页面下的所有格式都改为该格式。
当具有相同的选择器时，以最后一个为准。
不同的选择器优先级由作用域大小排列。选择范围越大，优先级越小。
三。组合选择器。
1.后代选择器。
div p {
color: blueviolet;
}
该div下所有的p的样式都为该样式。
2.儿子选择器。
div>span {
color: aqua;
}
只有div中的span才具有该属性，
3.毗邻选择器。
div+span {
color: orange;
}
在div紧挨着的下一个span的样式。
4.弟弟选择器。
div~span {
color: brown;
}
div下面的所有的span的样式修改。
四，属性选择器
<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">span</span>
1.属性名
[hobby] {
background-color: red;
color: orange;
}
使用属性名指定修改。
2.属性名加值
[hobby="jdb"] {
background-color: pink;
}
使用属性名加值指定修改。
3.标签，属性名加值
input[hobby="jdb"] {
background-color: greenyellow;
}
指定某个标签中具有某个属性和某个值的元素修改。
五。分组和嵌套。
1.分组。可以将一些需要同样的样式修饰的值一起修饰。
div,span, p {
color: pink;
}
2.嵌套 不同的选择器可以组合使用同样的属性。
#d1,.c1,span {
color: orange;
}
六。伪类选择器。
主要是对链接标签<a>使用的选择器。
1.link
link是在a标签连接态时，显示的相册。
a:link {
color: pink;
}
2。鼠标悬浮态
当鼠标悬浮在链接上时，会出现的样式。
a:hover {
color: red;
}
3.鼠标点击态
当鼠标点击下去的时候会出现的样式和状态。
a:active {
color: purple;
}
4.访问态。
当链接被访问后，出现的状态。
a:visited {
color: dimgrey;
}
5.input框被点击时的状态，被称为获取焦点
input:focus {
background-color: orange;
}
6.input悬浮时显示的状态。
input:hover {
background-color: red;
}
七。伪元素选择器。
1.作用与某个标签的头一个字符的样式。
p:first-letter {
font-size: 48px;
color: gold;
}
2。作用与某个元素的开头，而且不能被选择。
p:before {
content: '$';
color: gold;
}
3.作用于某个元素的结尾。
p:after {
content: "?";
color: red;
}
这些选择器会在浮点的问题上有很大的用处。
原理就是始终显示在该元素内部内容的最后面。。
day45_9_4前端（2）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前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- centos7删除MariaDB怎么操作
有时我们要在centos上安装一些组件,需要先把原来的数据库删除,比如MariaDB,不然就出现冲突错误,那么如何删除数据库呢?首先查询所安装的MariaDB组件: [root@localhost l ...
- Java Web 学习(9) —— EL 与 JSTL
EL 与 JSTL EL与JSTL的作用是为了减少JSP页面中的代码. EL EL(Expression Language):表达式语言 常用于取值 语法 EL 表达式以${开头,以}结束. 多个表达 ...
- Centos7下安装Relion
目录 1.Virtual Box 1.1下载Virtual Box 1.2安装Virtual Box 2.Centos7 2.1下载Centos7 2.2安装Centos7 2.2.1配置虚拟机 2. ...
- Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) C. Messy 构造
C. Messy You are fed up with your messy room, so you decided to clean it up. Your room is a bracket ...
- Global Azure Bootcamp 2019 宁波站活动总结
4月27日,由微软MVP技术社区发起的Global Azure Bootcamp 2019盛会在全球80多个国家270个城市举办.本次活动由全国众多Azure专家及微软MVP技术社区成员,分别在北京. ...
- 【STM32H7教程】第24章 STM32H7的Cache解读（非常重要）
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第24章 STM32H7的Cache解读(非常重要 ...
- ES6入门 阮一峰
ECMAScript 6 入门 http://es6.ruanyifeng.com/#README 在线ES6转ES5 https://es6console.com/k11vgg1r/
- PHP echo一个对象报语法错误，为什么？
为什么直接echo一个对象就会报语法错误,而如果这个对象实现了__toString方法后就可以直接输出呢? 原因是echo本来可以打印一个对象,而且也实现了这个接口,但是PHP对其做了个限制,只有实现 ...
- vue-父组件和路由
父子组件之间传值 <div id="app"> <com1 v-bind:parentmsg="msg" @func="getMsg ...
- 学习Swoole需要掌握哪些基础知识
多进程/多线程 了解Linux操作系统进程和线程的概念 了解Linux进程/线程切换调度的基本知识 了解进程间通信的基本知识,如管道.UnixSocket.消息队列.共享内存 SOCKET 了解SOC ...