css引入 以及选择器040
css的介绍: css(Cascading Style Sheet) 层叠样式表 作用就是给HTML页面标签议案家各种样式 定义网页效果 简单来说 就是讲网页内容和显示样式进行分离 , 提高了显示功能.
css 的优点: 1 使数据和显示分开 2 降低网络流量 3 使整个网页视觉效果一致 4 使开发效率提高了 (耦合性降低 一人负责写HTML 一人负责写css)
三种引入方式 : 1 行内样式
<div>
<p style="color: green">我是一个段落</p>
</div>
2 内接样式:
<style type="text/css">
/* 位置是在head里边写我们的css代码*/
span{
color: yellow;
}
</style>
3 外界样式 包括链接式和导入式
链接式
<link rel="stylesheet" href="./index.css">
导入式
<style type="text/css">
@import url('./index.css'); //该方法类似于后端的导入模块方式 是css3中的方式 以后会用到
</style>
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*内接式*/
/*找标签 选择器:选中标签*/
p{
color: red;
font-size: 30px;
}
.fu{
color: red;
}
</style>
<!--外接式-->
<!--<link rel="stylesheet" href="./css/index.css">-->
<style type="text/css">
@import url('./css/index.css');
</style>
</head>
<body>
<!--标准文档流下
总结: 行内样式的优先级 1000 大于 内接和外接式
-->
<!--1.行内样式-->
<div class="fu" style="color: aqua">
福彩
</div>
<p>李凯</p>
<span>师宇</span>
</body>
</html>
优先级为 行内样式 > 内接样式 > 外接样式
css的选择器 基本选择器和高级选择器
基本选择器包含: 标签选择器 id选择器 以及类的选择器(公共类 即将类的相同属性写到一起 继承 避免代码的冗余) 标签选择器和类选择器比较类似 可以选中所有的该元素 标签的为标签元素 类的为名称为该类的元素 不管藏得有多深 都能选中
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css"> /*权重问题 数数 数选择器的数量 id class 标签*/ 一定牢牢记住这个顺序
/*1 0 0*/
#box{
color: darkorange;
}
/*0 1 0*/
.box{
color: green;
}
/*0 1 0*/
.active{
color: yellow;
}
/*001*/
div{
color: red;
} /* 行内权重1000 > id 100 > 类 10 > 标签 1*/
</style>
</head>
<body>
<div class="box active" id="box">
哈哈哈
<div>
<div>
<div>
猜猜我的颜色
</div>
</div>
</div>
</div>
</body>
</html>
权重问题: 行内权重 1000 > id 100 > 类 10 > 标签 1
高级选择器 : 后代选择器 子代选择器 并集选择器 交集选择器
后代选择器 : 使用空格表示后代选择器 顾名思义 父元素的后代 (包括儿子 孙子 重孙子)
.container p{
color: red;
}
.container .item p{
color: yellow;
}
子代选择器 > 仅仅包含当前元素的子代 (不包含孙子)
.container>p{
color: yellowgreen;
}
并集选择器 多个选择器之间用逗号隔开 表示选中的页面中的多个标签 一些共性的元素 可以使用并集选择器
/*并集选择器*/
h3,a{
color: #008000;
text-decoration: none;
}
交集选择器 使用.表示交集选择器 第一个标签必须是标签选择器 第二个必须是类选择器 语法 : div.active
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
//它表示两者选中之后元素的共同特征
属性选择器 就是根据标签中的属性 选中当前的标签
/*根据属性查找*/
/*[for]{
color: red;
}*/ /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/ /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/ /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/ /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/ /**/ /*指定单词的属性*/
label[for~='user1']{
color: red;
} input[type='text']{
background: red;
}
/*权重问题 数数 数选择器的数量 id class 标签*/
权重相同时 以后来设置的属性为主
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1 2 1*/
.box1 .box2 #wrap3 p{
color: red;
}
/*1 2 1*/
#wrap1 .box2 div .active{
color: green;
}
/*2 0 1*/
/*#wrap1 #wrap2 div p{*/ /*}*/
</style>
</head>
<body>
<div class="box1" id="wrap1">
<div class="box2" id="wrap2">
<div class="box3" id="wrap3">
<p class="active">猜猜我的颜色</p>
</div>
</div>
</div>
</body>
</html>
通过继承来设置的属性 它的权重为0 与选中的元素没有可比性
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
// 运行结果为绿色的
都是继承来的 谁描述的近 显示谁的属性 (就近原则)
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}
//红色的离得较近 字体颜色是红色的
可以继承的属性有 : color font-* line-* text-* 属性
伪类选择器 一般会用在超链接a标签中 使用a标签的伪类选择器 一定要遵循 爱恨准则 LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{ color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{ color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{ color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{ color: yellowgreen;
}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
color: red;
} /*没有被访问过的a的颜色*/
a:link{
color: greenyellow;
}
/*访问过后的颜色*/
a:visited{
color: darkgreen;
}
/*鼠标悬浮时候的状态*/
a:hover{
color: darkgray;
font-size: 20px;
text-decoration: none;
}
a:active{
color: darkblue;
}
.box{
color: green;
/*设置小手的状态*/
cursor: pointer;
}
.box>p{
display: none;
}
.box:hover p{
color: darkorange;
font-size: 20px;
display: block;
}
input {
border: 0;
outline: none;
width: 300px;
height: 40px;
border: 1px solid #999;
border-radius: 2px;
} </style>
</head>
<body>
<!--爱恨准则 LoVe HAte-->
<input type="text">
<a href="#">百度一下</a> <div class="box">
悬浮
<p>
李凯
</p>
</div>
</body>
</html>
css的两大特征 : 继承性和层叠性 继承性 即继承父类的属性和方法 层叠性即权重大的标签覆盖掉权重小的标签 . 就是判断权重 谁的权重大谁说了算 判断权重 即数数
数 :id 的数量 class的数量 标签的数量 顺序不能乱.
权重一样就近原则 谁离得近就显示谁的属性
css引入 以及选择器040的更多相关文章
- CSS 引入方式 选择器
---恢复内容开始--- CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 步骤: A.找到标签 B.操作标签 ...
- 第17天：CSS引入、选择器优先级（中级）
一.CSS 位置 1.行内式 css <div class="fr" style="color:red;">aa</div> 2. 内 ...
- CSS（一） 引入方式 选择器 权重
Css(一) Cascading Style Sheet 层叠样式表 css注释方式/* */ 一.Css引入方式 1. 行间样式 style=" key:value; " &l ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- CSS的引入与选择器
CSS的引入与选择器 CSS与HTML的关系 Cascading Style Sheet 即层叠样式表 在上一篇文中,已经介绍了一些非常常用的HTML标签,接下来将步入CSS的学习,如果将单纯HTML ...
- 日常：css样式、选择器、个别知识点、数组array
优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...
- link标签和css引入方式
link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...
- 前端之css样式（选择器）。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
随机推荐
- hdu 2211 杀人游戏
设f(N,K)返回最后取出的编号 那么f(n,k)进行第一次选后,剩下n-n/k个人,这剩下的人里最后被取出的编号为f(n-n/k,k)记为x 那么它在前一次队列里的编号则是(x-1)/(k-1)+x ...
- Python基础入门-实现猜数字小游戏
今天呢,我们来通过前面学过的一些知识点来完成一个猜数字大小的游戏程序设计.那么呢,一般人写代码直接上来就干,没有分析,这样的做法是没有产出的,除非你是大牛,今天呢,我会把我学习编程的思路分享给大家,我 ...
- dynamic和nullable一起使用时的注意
dynamic和nullable一起使用时的注意
- java IO 对象流 反序列化和序列化
例: 重点:需要序列化的对象必须实现Serializable接口 //需要序列化的对象 public class User implements Serializable { private Stri ...
- this关键字剖析
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Spring注解：Enable相关注解
@EnableXXX:可以用于取代xml配置中的一些配置,被该注解所标注的类,其中被@Bean标注的方法,一般就用于返回和EnableXXX的XXX相关的Bean,Bean中一般有XXX相关的注解 同 ...
- rsync服务搭建--2018.5.8 [优化后最终版]
2018年5月8日 22:09:38 第一步配置基础环境(按照自己的规划配置并非每人的环境都一致) 第一台服务器(RSYNC服务器): rsync外网地址:10.0.0.41 rsync内网地址:1 ...
- CENTOS7 使用 Nginx + Uwsgi 部署 Django 项目
写在前面的话 最近总是见到有新学 Django 的朋友在部署自己的项目到 Linux 上面的时候运行不起来,所以就动手写了这篇博客. 对于不会搭建 Python 3 环境的朋友可以参考前面的博客[CE ...
- 进阶Kotlin-常见关键字
常见Kotlin 的关键字 一些常见的语法,我没有写注释. 前面基础的kotlin语法已经弄完了. 现在是高阶kotlin的语法啊. 包括,面向对象,lambad等. 其中面向对象的三大特点:封装 ...
- windows下安装newman
1.下载安装node.js,下载地址::https://nodejs.org/en/download/,这里我下载的为v10.15.0-x64.msi,下载后直接安装即可,安装完后可输入node -v ...