前端复习 css(一)
如果我们把HTML比喻成一个人那么css就是化妆技术,
HTML+css就是一个人掌握了美貌可想而知css是多么的重要
下面我们一起复习css基础知识
标签之间的关系
祖先元素:直接或间接包含后代元素的元素。
后代元素:直接或间接被祖先元素包含的元素。
父元素:直接包含子元素的元素。
子元素:直接被父元素包含的元素。
兄弟元素:拥有相同父元素的元素。
meta标签属性补充
使用前提:目前几乎所有的搜索引擎都使用网络机器人自动查找页面中meta值来给网页分类
使用场景1
<meta name="keywords" content="牙疼怎么办,智齿是什么,拔牙多少钱,矫正多少钱,九院医生,北大口腔,瑞尔口腔,拜耳口腔">
注意 为搜索引擎提供的关键字列表。 各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。
使用场景2
<meta name="description" content="有牙齿问题,找河马牙医,儿童口腔,全国儿童口腔在线咨询,牙疼怎么办,拔牙多少钱,矫正多少钱,种植牙,有牙齿问题">
注意 用来告诉搜索引擎你的网站主要内容。
使用场景3
<meta name="renderer" content="webkit" />
注意 优先以webkit内核渲染页面
清楚默认外边距
默认的一些标签会在标签外面有边距
在开发时一般都会把边框给设置为0, 自己去控制标签之间的距离
常用的标签边距
内边距:padding
外边距:margin
background详解
background-color 规定要使用的背景颜色,一般用(字母,颜色十六进制,rgb)
background-image 规定要使用的背景图像。url(‘URL(指向图像的路径。)’)
none(默认值。不显示背景图像。)
background-size 规定背景图片的尺寸。
background-size:100px 100px;(
1.设置背景图像的高度和宽度。
2.第一个值设置宽度,第二个值设置高度。
3.如果只设置一个值,则第二个值会被设置为 “auto”。
),
background-size:200px;
background-size:50%;
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 “auto”。
background-size:100% 100%;
background-size:cover;
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
background-repeat : 规定如何重复背景图像。
repeat:默认。背景图像将在垂直方向和水平方向重复。
repeat-x: 背景图像将在水平方向重复。
repeat-y: 背景图像将在垂直方向重复。
no-repeat: 背景图像将仅显示一次。
background-position 规定背景图像的位置。
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
background-origin 规定背景图片的定位区域。
padding-box: 背景图像相对于内边距框来定位。
border-box: 背景图像相对于边框盒来定位。
content-box: 背景图像相对于内容框来定位。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
属性连写
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
css样式
CSS 指层叠样式表 (Cascading Style Sheets)
作用:
它是用来美化网页用的
HTML代码是用来构建网页整体布局
CSS则是用来美化网页。两者缺一不可
建房子需要用钢筋水泥(HTML代码)把房子整体架构建好,
涂料之类的(CSS代码)就是用来装饰房子的
基础语法
一条或多条声明
h1{color:red;}
多重声明
h1{color:blue;
text-align:center;
}
CSS样式简介
行内样式: (内联样式)直接在标签的style属性中书写
页内样式: 在本网页的style标签中书写
外部样式: 在单独的CSS文件中书写,然后在网页中用link标签引用
选择器
什么是选择器?
选择器就是对指定的标签设置样式,要把指定的标签选择出来
通用选择器
通用选择器,可以同时选中页面中的所有元素。
语法:
*{ }
类选择器
类选择器以一个点号显示
.center {text-align: center}
只要有同一类名的class都会被选择
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
<p id="red">这个段落是红色。</p>
#red {color:red;}
#sidebar p{}
复合选择器
可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素。
语法
选择器1选择器2{}
例如: div.box1会选中页面中具有box1这个class的div元素。
群组选择器
群组选择器,可以同时使用多个选择器,多个选择器将被同时应用指定的样式。
语法:
选择器1,选择器2,选择器3 { }
比如: div,.test1,#box会同时选中页面中div元素,class为test1的元素,id为box的元素。
后代选择器
后代选择器可以根据标签的关系,为处在元素内部的后代元素设置样式。
语法:
祖先元素 后代元素 后代元素 { }
比如: div p{}就会选中页面中所有的div元素内的p元素。
直接后代选择器
语法:
父元素 > 子元素 {}
兄弟选择器
除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}
属性选择器
属性选择器可以挑选带有特殊属性的标签
语法:
[属性名]
[属性名=“属性值”]
[属性名~=“属性值”]
[属性名|=“属性值”]
[属性名^=“属性值”]
[属性名$=“属性值”]
[属性名*=“属性值”]
伪类和伪元素
使用场景
有时候,你需要选择本身没有标签,但是
仍然易于识别的网页部位,比如段落首行
或鼠标进入等等。
针对a标签
正常链接a:link
访问过的链接a:visited(只能定义字体颜色)
鼠标滑过的链接a:hover
正在点击的链接a:active
针对其它标签
获取焦点:focus
指定元素前:before
指定元素后:after
选中的元素::selection
首字母:first-letter
首行:first-line
选择第一个子标签 :first-child
选择最后一个子标签:last-child
选择指定位置的子元素:nth-child
否定伪类
否定伪类可以帮助我们选择不是其他标签的某个标签。
语法:
:not(选择器){}
比如div:not(.box)表示选择所有的div元素但是class为box的除外。
前端复习 css(一)相关推荐
- 前端复习HTML+CSS+JavaScript(必问面试题)
前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么? JPG:支持有损压缩.不支持透明.不支持动画.色彩还原度较好 PNG:不支持压缩.支持透明.半透明.不透明.不支持动画 GIF:支持有 ...
- 从零开始学前端:CSS复合选择器 --- 今天你学习了吗?(CSS:Day10)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录 从零开始学前端:程序猿小白也可以完全 ...
- 从零开始学前端:CSS背景颜色 --- 今天你学习了吗?(CSS:Day09)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录 从零开始学前端:程序猿小白 ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- 从零开始学前端:CSS引入 --- 今天你学习了吗?(CSS:Day07)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录 从零开始学前端:程序猿小白也可以完全掌握! ...
- 前端复习——js(四)
前端复习--js 面向对象编程 面向对象编程介绍 面向过程POP(Process-oriented programming) 面向对象OOP(Object Oriented programming) ...
- 好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超 ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端html,css基础总结
0.1.css引入界面的方式: 内联式:通过标签的style属性,在标签上直接写样式. <div style="width:100px; height:100px; backgroun ...
最新文章
- 感冒了,头晕晕沉沉的,什么时候能好啊!
- python基础知识选择题-python基础知识练习题(二)
- this super java_java中 this 和super的用法
- 2021计算机职业适应性测试考什么,单招考试面试内容(职业适应性测试)大纲详解(信息技术类)...
- Oracle中ascii为0的陷阱
- SteinerTree模板
- Linux下安装Nginx完整教程及常见错误解决方案
- java 重写equals的要点_浅谈java 重写equals方法的种种坑
- winform 报表的基本使用
- 深入解析数码相机CCD坏点及噪点检测!【图解教程】
- LSF_管理用户、主机和队列_1
- 1428D - Bouncing Boomerangs(思维+构造+贪心)
- 计算机工程师对社会报答什么,报答作文400字(精选10篇)
- 如何利用HTML5快速开发一款小游戏
- 【iPhone】iPhone仅仅备份图片且保存实况图片(live photo)的方案
- python 3.8教程_Python 3.8 新功能全解
- 看雪安全接入KSA开放内测
- 非线性函数线性化方法总结
- python脚本之批量查询网站权重2.0
- 队名 Booqmz 具体读音可以详见谷歌翻译声优~