CSS概念,引入,选择器
概念
层叠样式表,定义如何显示HTML元素.
使用方式
行内样式
不推荐使用此方式
结构 和 样式的 杂糅会影响后期的维护
<p style="color: red">Hello world.</p>
内嵌样式表
将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中
<head><meta charset="UTF-8"><title>Title</title><style>p {background-color: #2b99ff;}</style> </head>
外部样式表
推荐使用此方式. link 标签写在 head 标签内
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
href 外部 CSS 文件的路径
rel 固定为 stylesheet
type 固定为 text/css
import 导入式
导入式会在整个网页装载完后再装载CSS文件
因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。
使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果。
CSS 选择器
基本选择器
- 标签名
- #id
- .类名
- *
组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/ li a {color: green; }
儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/ div>p {font-family: "Arial Black", arial-black, cursive; }
毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/ div+p {margin: 5px; }
弟弟选择器
/*i1后面所有的兄弟p标签*/ #i1~p {border: 2px solid royalblue; }
属性选择器
/*用于选取带有指定属性的元素。*/ p[title] {color: red; }/*用于选取带有指定属性和值的元素。*/ p[title="213"] {color: green; } 不怎么常用的属性选择器: /*找到所有title属性以hello开头的元素*/ [title^="hello"] {color: red; }/*找到所有title属性以hello结尾的元素*/ [title$="hello"] {color: yellow; }/*找到所有title属性中包含(字符串包含)hello的元素*/ [title*="hello"] {color: red; }/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/ [title~="hello"] {color: green; }
分组
当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div标签和p标签统一设置字体为红色。
div, p {color: red; }
分两行来写更清晰一些
div, p {color: red; }
嵌套
多种选择器可以混合起来使用
.c1类内部所有p标签设置字体颜色为红色。
.c1 p { color: red; }
伪类选择器
/* 未访问的链接 */ a:link {color: #FF0000 }/* 已访问的链接 */ a:visited {color: #00FF00 }/* 鼠标移动到链接上 */ a:hover {color: #FF00FF }/* 选定的链接 */ a:active {color: #0000FF }/*input输入框获取焦点时样式*/ input:focus {outline: none; background-color: #eee; }
伪元素选择器
first-letter
/*在每个<p>元素内容首字母添加样式*/ p:first-letter {font-size: 48px;color: red;}
before
/*在每个<p>元素之前插入内容*/ p:before {content:"*"; color:red; }
after
/*在每个<p>元素之后插入内容*/ p:after {content:"[?]"; color:blue; }
ps:
before 和 after 多用于清除浮动
选择器的优先级
CSS继承
CSS的继承机制得以让样式可以给予标签和其后代
选择器的优先级权重
内联样式 1000
id选择器 100
类选择器 10
元素选择器 1
ps:
但是某些属性是无法继承的比如: border, margin, padding, background等
权重计算永不进位
群组选择器中 , 各个选择器由自身的权重决定 , 互相之间是独立的
后代 / 子代 / 伪类 选择器优先级计算按照 各组成部分相加得到
特殊方式
除此之外还可以通过添加 !important 方式来强制让样式生效,但并不推荐使用。
过多的使用!important 会使样式文件混乱不易维护。
万不得已再用 !important 吧
转载于:https://www.cnblogs.com/shijieli/p/10012181.html
CSS概念,引入,选择器相关推荐
- CSS知识点整理(代码示例参考w3shool)(包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等)
文章目录 CSS简介 CSS 概念 CSS 作用 CSS 语法 CSS引入方式 1.内联样式表 2.内部样式表 3.外部样式表 CSS常用样式 CSS背景 1.背景色:background-color ...
- 好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
- css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
- 外链引入css有哪些方式_HTML+CSS基础(三) CSS的引入方式和CSS选择器
一.CSS概念: 什么是CSS,CSS说白了就是给页面添加样式,让整个页面变的好看起来的一种东西,用来定义网页外观,如字体.背景.颜色等 二.在页面中使用css的3种常用方式 1.行内样式 就是在一个 ...
- css的引入方式和选择器
目录 1.css介绍 2.css的引入方式 3.css的元素选择器 1.基本选择器 2.组合选择器 3.属性选择器 4.伪类选择器 5.伪元素选择器 1.css介绍 层叠样式表(英文全称:Cascad ...
- CSS的基础选择器、字体属性、文本属性和引入方式
目录 一.css的语法规范 二.css的基础选择器 (一)基础选择器总结 (二)标签选择器 (三)类选择器 (四)id选择器 (五)通配符选择器 三.CSS字体属性 (一)字体属性总结 (二)font ...
- html引入scss,使用Sass混合宏来声明CSS伪类选择器
CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n).:nth-of-type(n)这样的选择器,其好处在这里就不多说了.如果你对这方面感兴趣的话,你可以阅读早前整理有关于C ...
最新文章
- php前面有人排队,PHP实现打印类(实现队列排队打印)
- golang 获取当前执行程序路径
- java发红包课程设计_JAVA 实现简单的发红包案例
- Knockoutjs Component问题汇总
- google天气预报接口_将天气预报添加到谷歌浏览器
- 数据结构——二叉树的最小深度算法
- XX市公共租赁住房信息管理系统模板
- oracle如何调试sql,调试oracle与调试sql server存储过程
- UI(用户界面)设计规则和规范
- 用《内网穿山甲》共享内网中的远程桌面服务
- 【JavaEE Spring】SpringBoot 日志文件详解
- android 断点下载的实现,自己动手实现一个Android断点下载
- 鸿蒙系统微信红包,微信红包王版app下载-最新微信红包王版下载-安卓苹果鸿蒙版-155175软件...
- 三地检方分别对程颖、谭元生、聂作坤案提起公诉
- mfc动态改变clip风格_欧式古典家具风格的演变历程
- mysql数据库命令备份还原
- KETTLE:通过代码运行本地ktr文件
- centos6 yum安装nginx
- 使用cookie实现一周内自动登录
- 15版计算机应用基础知识整理,[电脑基础知识]计算机应用基础.ppt