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前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
随机推荐
- centos 6.9 升级glibc动态库
glibc是gnu发布的libc库,即c运行库,glibc是linux系统中最底层的api,几乎其它任何运行库都会依赖于glibc.glibc除了封装linux操作系统所提供的系统服务外,它本身也提供 ...
- elementUI+Vue实现管理系统的登录页面
<template> <div class="maxbox"> <div id="appp"> <vue-partic ...
- MVC(基础二)
原文链接:https://blog.csdn.net/wuzxc520/article/details/77880783 1.网站开发介绍 2.响应流程 3.MVC 介绍 4.文件夹含义
- 挑战编程 uva100 3n+1
挑战编程 刘汝佳 的第一道习题 热身题 熟悉下提交格式 题意 #include <iostream> #include <algorithm> using namespace ...
- Noip2017Day1T3 逛公园
题目链接 problem 一个有向无重边自环图,设\(D\)为从\(1\)号点走到\(n\)号点的最短距离.问有多少条从\(1\)到\(n\)的路径长度不超过\(D+K\).\(K\)为给定的值,且\ ...
- python做中学（三）条件编译的用法
C代码中经常使用条件编译,python中该怎么用呢?Python没有像C或C或Java甚至Java一样编译,python文件被“即时”编译,您可以将其视为类似于Basic或Perl的解释语言 只需使用 ...
- Loj #6503. 「雅礼集训 2018 Day4」Magic
Loj #6503. 「雅礼集训 2018 Day4」Magic 题目描述 前进!前进!不择手段地前进!--托马斯 · 维德 魔法纪元元年. 1453 年 5 月 3 日 16 时,高维碎片接触地球. ...
- MySQL应用之CROSS JOIN用法简介教程
目录 2. cross join用法 @ 本博客翻译自两篇博客的: http://www.mysqltutorial.org/mysql-cross-join/ https://www.w3resou ...
- Java-100天知识进阶-Java内存-知识铺（四）
知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停的来唤醒你记忆深处的知识点. 1.Java内存模型是每个java程序员必须掌握理解的 2.Java内存模型的主要目标 ...
- WCF全双工通信实例分享(wsDualHttpBinding、netTcpBinding两种实现方式)
最近在研究WCF通信,如果没有接触过的可以看我的前一篇文章:https://www.cnblogs.com/xiaomengshan/p/11159266.html 主要讲的最基础的basicHttp ...