前端基础--css基本语法,选择器
一.css概述
CSS（Cascading Style Sheet)层叠样式表,定义如何显示HTML元素，给HTML设置样式，让它更加美观。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
CSS创建于1996年,在1997年W3C颁布HTML4.0与XHTML1.0时同时公布了CSS1标准.1998年推出了CSS2标准,目前仍不断发展和完善中
二.css语法
1.实例
2.注释
/* 注释内容 */
三.css的引入方式
优先级: 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
1.行内样式:行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。
<p style="color: red">Hello world.</p>
2.内部样式:嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
3.外部样式:外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/> # 注意css样式表路径,这里使用的是相对路径
4.导入方式:导入方式指的是使用 CSS 规则引入外部 CSS 文件。(不推荐,因为!import引入的文件会等页面全部下载完毕再被加载)
<style>
@import url(style.css);
</style>
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。 1.link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件； 2. @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件； 3.当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；
比较连接方式和导入方式
四.css选择器
基本选择器
1.元素选择器:(控制整个类型)
p {color: "red";}
2. id选择器:
/*号表示id属性，后面的i1表示id属性的值*/
#i1 {
background-color: red;
}
3. 类选择器:(样式列名不要用数字开头)
/* .表示class属性，c1表示class的值*/
.c1 {
font-size: 14px;
} /*找到所有p标签里面含有class属性的值为c1的p标签*/
p.c1 {
color: red;
}
4. 通用选择器
* {
color: white;
}
/*表示所有的标签*/
5. 组合选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
6.子代选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
7.同辈选择器
/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
margin: 5px;
}
8.属性选择器
/*用于选取带有指定属性(title)的所有p元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="red"] {
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;
}
属性选择器其他方法
9.分组和嵌套:
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用
逗号分隔的分组选择器来统一设置元素样式。
div, p {
color: red;
}
10. 伪类选择器
可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态。
/* 未访问的链接 */
a:link {
color: #FF0000
} /* 已访问的链接 */
a:visited {
color: #00FF00
} /* 鼠标移动到链接上 */ 这个用的比较多
a:hover {
color: #FF00FF
} /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
color: #0000FF
} /*input输入框获取焦点时样式*/
input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
11.伪元素选择器
#将p标签中的文本的第一个字变颜色变大小
p:first-letter {
font-size: 48px;
color: red;
} /*在每个<p>元素之前插入内容*/
p:before {
content:"这是之前插入的元素";
color:red;
} /*在每个<p>元素之后插入内容*/
p:after {
content:"[?]";
color:blue;
}
选择器的优先级
权重计算
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大
css优先值法则
当某个样式属性有可能会重复定义,但又不希望被优先级高的样式覆盖掉时,则可以在样式属性之后使用!important关键字将该属性提高到最高优先级,相当于锁定该属性防止以后被优先级高的样式表覆盖.
body{ color:red; !important;}
五.css属性相关
1.宽和高
width: 16px; 默认16px
height
2.文字字体
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
3.字体大小
font-size: 14px;
4.字体粗细
font-weight
前端基础--css基本语法,选择器的更多相关文章
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
- 前端基础-CSS属性操作
前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...
- HTML&CSS基础-CSS的语法
HTML&CSS基础-CSS的语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.dome.html源代码 <!DOCTYPE html> <html ...
- 2020年12月-第02阶段-前端基础-CSS Day02
CSS Day02 复合选择器 后代选择器 并集选择器 1. CSS复合选择器 理解 理解css复合选择器分别的应用场景 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 , ...
- Web前端基础——CSS
一.CSS概述 css ( cascading style sheets ) 层叠样式表,可以轻松设置网页元素的显示.位置和格式外,甚至还能产生滤镜,图像 淡化,网页淡入淡出的渐变效果,简而言之,cs ...
- 前端基础-CSS是什么？
阅读目录 一. 什么是CSS 二. 为何要用CSS 三. 如何使用CSS 一. 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式 ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
随机推荐
- JDK8时间格式转换
来源:https://blog.csdn.net/zhangzijiejiayou/article/details/76597329 LocalDateTime 本地日期时间 LocalDateTim ...
- VS Code 界面语言设置
首先Ctrl+shift+p打开命令面板. 输入配置显示语言 回车 更改locale即可更改页面显语言(更改后需重启软件). 目前支持如下语言 Display Language Locale Engl ...
- css常用属性总结：文本属性中的text-align
前面提到text-indent属性,用来实现文本的缩进,今天的text-align使用率可比文本缩进高的多.拿自己现在做的项目上来说,水平居中和垂直居中估计是用到最多了,那我们就先看看它的语法吧! t ...
- Fundamentals of Garbage Collection
[Fundamentals of Garbage Collection] 1.Reclaims objects that are no longer being used, clears their ...
- Docker私有仓库registry的搭建及使用
前言 由于Docker Hub公共仓库很多时候使用这并不是很方便,大分部因为网络的问题可能拉取的时候会很慢或者拉取不到,所以搭建一个本地的私有仓库. 准备 由于此篇文章是在Kubernetes集群安装 ...
- MacOS下打包Python应用
在MacOS下开发的Python应用,不是Web Application,开发好以后,如何给用户使用呢?用户的操作系统也是MacOS 使用py2app打包 一.软件环境 ...
- 如何安装JDeveloper
1>下载jdk和JDeveloper jdk版本:jdk-7u65-windows-x64.EXE JDeveloper版本:jdev_suite_12.3_win64_V44419-01.is ...
- MYISM表并发写请求过多 导致无法被读取解决方案
MyISAM锁调度是如何实现的呢,这也是一个很关键的问题.例如,当一个进程请求某个MyISAM表的读锁,同时另一个进程也请求同一表的写锁,此时MySQL将会如优先处理进程呢?通过研究表明,写进程将先获 ...
- [Java]通过java获取计算机名
通过java获取计算机名 String hostname = "Unknown"; try { InetAddress addr; addr = InetAddress.getLo ...
- 产品设计师 VS UX设计师：你更想成为哪一个？
随着互联网的快速发展,越来越多的应届毕业生也成为设计师的一员.他们当中的许多人选择UX设计师作为第一份工作,也有一些人选择做一个产品设计师.你是否也想成为设计师呢?这两种设计师你更倾向于哪一个呢?在你 ...