设置层级为2html,前端知识(Css)汇总2
三. CSS介绍
1.为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生.
2.CSS是 Cascading Style Sheets 的首写字母缩写,意思是层叠样式表.
3.有了CSS, html 中大部分表现样式的标签就废弃不用了, html只负责文档的结构和内容,
4.表现形式完全交给CSS, 这样使得html文档变得更加简洁.
1. CSS基本语法
CSS使用格式:
选择器 {
属性 : 值;
属性 : 值;
...
}
说明:
1.选择器是将样式和页面元素关联起来的名称
2.属性名是希望设置的样式属性, 每个属性有一个或者多个值
3.属性和值之间用冒号隔开
4.一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
例如:
2. CSS引入方法
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.
2. 嵌入式:
通过 style 标签, 在网页上创建嵌入的样式表.
3.外联式:
3. CSS选择器
1.标签选择器
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
通用格式:
标签名 {
属性名: 值;
...
}
例如:
div {
color: red;
}
p {
font-size: 18px;
}
一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意
2.类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是css中应用最多的一种选择器
举例:
3.层级选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
例如:
层级选择器: 按照标签的层级来匹配对应的标签
4. id选择器
通过 id 名来选择元素,元素的 id 名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id 名一般给程序使用,所以不推荐使用id作为选择器。
使用格式:
#id名 {
属性名: 值
}
举例:
5. 伪类选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。
CSS部分:
.box1 {
width:100px;
height:100px;
background:gold;
}
.box1:hover {
width:300px;
}
HTML部分:
补充:
#input:focus {
outline: none;
border: 2px solid red;
}
总结:
1.CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.
2.CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.
3.标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.
4.class 类选择器是经常使用的选择器. 可以多多练习
5.层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素
6.id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.
7.伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可
4. CSS属性入门
布局常用属性样式:
补充说明:
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
我们可以对上面的代码进行合并书写:
background: url(bgimg.gif) no-repeat 5px 5px;
补充:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
css 浮动:
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
文本常用样式属性:
提示:样式中的注释
/* 设置头部的样式 */
.header{
width:960px;
height:80px;
background:gold;
}
设置层级为2html,前端知识(Css)汇总2相关推荐
- 前端知识总结汇总!(HTML、CSS、JS、jQuery、vue、微信小程序)
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
- html是如何实现独占一行原理,前端知识(Html)汇总1
一. 了解前端 1. 什么是前端 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏 ...
- Web前端知识CSS(CSS定位、CSS透明、阴影、边框圆角)
一.CSS 定位 定位的作用 普通文档流中块元素垂直排列,行内元素水平排列. 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置(自由的在某个盒子内移动位置或者固定在屏幕中的某 ...
- 前端知识笔记汇总200304
css3弹性盒子 css3的一种新的布局模式 主要记录盒子自身样式与子元素样式 弹性盒子样式 属性名称 属性功能 属性值 例子 display 设置弹性盒子类型 flex,inline-flex di ...
- Web前端知识CSS(响应式设计)
1.什么是响应式设计 也叫响应式布局,响应式开发 实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的 ...
- Web前端知识CSS(清浮动的方法、CSS精灵图、滑动门)
一.清浮动的方法 清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点:不够灵活,适用于高度固定的布局中 2.为浮动元素的父级盒子设置浮动优缺点:会产生新的浮动问题 3.为浮动元素的父盒 ...
- qtabbar设置不同宽度_前端之css(宽高)设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
- 前端知识——css 之预处理器 less 语法
目录 1. less 语法 1.1 变量(Variables) 1.2 嵌套(Nesting) 1.3 运算(Operations) 1.4 混合(Mixins)和映射(Maps) 1.5 其他语法补 ...
- 前端知识-CSS垂直居中详解
行内元素垂直居中对齐: 1.只能用于inline-block,inline 2.vertical-aligh:baseline|top|middle|end 3. text-align:center; ...
最新文章
- php开发编程中心,Php编程
- Quadratic equation(二次剩余)2019牛客多校第九场
- 便利蜂发布《白领早餐报告》:仅5成白领每天吃早餐
- primefaces教程_Primefaces BlockUI组件示例教程
- jspstudy启动mysql失败_JspStudy软件快速本地部署JDK+tomcat+Apache+mysql环境
- Label-Consistent Backdoor Attacks
- 蔚然的风,你一阵吹过
- mysql如何获取今天的日期?
- 第一次尝试节奏跑(乳酸门槛跑)
- 2020蓝桥杯模拟赛题目解析(上)
- TCHAR char wchar_t 的区别
- 数据结构--逻辑结构和存储结构区别和内容
- php 多语言cms,帝国cms模板实现多国语言切换
- 苏亚星显示没有登录的服务器,VOD直播工具使用 直播站管理工具的使用 苏亚星VOD点播(直播)系统.doc...
- 《程序员练习生》第2期 什么年龄开始编程最好
- 【PAT天梯赛练习集L2-1】紧急救援——SPFA
- python浪漫背景表白_Python网站浪漫表白神器那些鲜为人知的技术
- 数据结构课程设计(考试管理系统)
- 一文读懂2016上半年ICT产业政策供给:过度与短缺
- 【安全知识分享】承包商入厂安全培训课件(106页).pptx(附下载)
热门文章
- 可视化——matploblib 解决中文显示的问题
- 计算机辅助设计实训报告范文,cad室内实训报告范文
- javascript 不让成为nan_JavaScript高级,第一集
- python安装教程-01-Python安装教程与特色介绍-小白python入门基础
- python入门教程pdf-Python入门教程详解.pdf
- python教程视频哪个好-Python 基础视频教程那个好?
- python基础代码大全-Python基础汇总
- python装饰器详解-Python 函数装饰器
- python能做什么项目-Python可以做大项目吗?
- android语音识别