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前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- 机器学习（1）——K近邻算法
KNN的函数写法 import numpy as np from math import sqrt from collections import Counter def KNN_classify(k ...
- Druid-代码段-4-3
所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程4.2,防止内存泄漏的连接关闭检测: //回收长期未归还的连接(再次说明:该方法仅在removeAbandoned设置为tr ...
- 004 C/C++ 数据类型_类型别名
#include "stdio.h" #include "stdlib.h" //这里定义了一个结构体. struct MyStruct1 { int a; f ...
- 7.8 Structured Streaming
一.Spark流计算组件的演进 二.Structured Streaming的基本原理 Structured Streaming将数据建模成一个结构化的数据表DataFrame,后到达的数据就是一 ...
- poj 2431 Expedition 贪心 优先队列 题解《挑战程序设计竞赛》
地址 http://poj.org/problem?id=2431 题解 朴素想法就是dfs 经过该点的时候决定是否加油 中间加了一点剪枝 如果加油次数已经比已知最少的加油次数要大或者等于了 那么就剪 ...
- fastdfs使用总结
参考:https://www.cnblogs.com/chiangchou/p/fastdfs.html 说明:这篇博客是为了记录我在安装和使用FastDFS分布式文件系统时遇到的问题和解决方法, ...
- [开源] FreeSql 配套工具，基于 Razor 模板实现最高兼容的生成器
FreeSql 经过半年的开发和坚持维护,在 0.6.x 版本中完成了几大重要事件: 1.按小包拆分,每个数据库实现为单独 dll: 2.实现 .net framework 4.5 支持: 3.同时支 ...
- 我说精通字符串，面试官竟然问我 Java 中的 String 有没有长度限制？
String 是 Java 中很重要的一个数据类型,除了基本数据类型以外,String 是被使用的最广泛的了,但是,关于 String,其实还是有很多东西容易被忽略的. 就如本文我们要讨论的问题:Ja ...
- javascript 模块化 (切记：学习思想)
模块化(切记:学习思想) 如果不用模块化编写代码,那么会具有以下问题: 代码杂乱无章,没有条理性,不便于维护,不便于复用 很多代码重复.逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本 ...
- pixijs shader fade 从左到有右淡入 从下到上淡入效果
pixijs shader fade 从左到有右淡入 从下到上淡入效果 const app = new PIXI.Application({ transparent: true }); doc ...