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前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- JAVA跨域、RestTemplate高并发下异常与配置、JSON数据Long转String
## 跨域支持 import org.springframework.context.annotation.Bean; import org.springframework.context.annot ...
- Python3——根据m3u8下载视频（上）之urllib.request
干活干活,区区懒癌已经阻挡不了澎湃的洪荒之力了...... 运行环境:Windows基于python3.6 ---------------------------------------------- ...
- matlab练习程序（点云密度）
算法思路是首先建立kd树,然后找到每个点距离最近的点的距离,对距离求和再求平均即可. 代码如下: clear all; close all; clc; pc = pcread('rabbit.pcd' ...
- Codechef October Challenge 2019 Division 1
Preface 这次CC难度较上两场升高了许多,后面两题都只能借着曲明姐姐和jz姐姐的仙气来做 值得一提的是原来的F大概需要大力分类讨论,结果我写了一大半题目就因为原题被ban了233 最后勉强涨了近 ...
- Tomcat 设置JVM内存大小
我的服务器的配置: # OS specific support. $var _must_ be set to either true or false. JAVA_OPTS="-Xms10 ...
- Python常用模块实战之ATM和购物车系统再升级
目录 一.项目地址 二.功能需求 一.项目地址 https://github.com/nickchen121/atm 二.功能需求 FUNC_MSG = { '0': '注销', '1': '登录', ...
- Win32 程序开发入门：一个最简单的Win32程序
一.什么是 Win32 Win32 是指 Microsoft Windows 操作系统的 32 位环境,与 Win64 都为 Windows 常见环境. 这里再介绍下 Win32 Applicatio ...
- 如何用 Python 给照片换色
最近遇到了一个需求,就是对图片进行色彩风格转换,让一个物体可以以各种不同的色彩来呈现. 比如一个红色的苹果,我想把它转化成绿色,这可怎么办呢?本来想的解决方案是先识别边界,然后对边界内区域进行色彩替换 ...
- openpyxl常用API
worksheet.cell(self, row, column, value=None)描述:给指定位置的单元格赋值参数: row&column:必须参数,单元格的坐标 value:可选参数 ...
- mongodb简单监控
一.mongodb提供了自己的监控工具 mongostat mongostat是mongodb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数 ...