前端学习 -- Css
Css:Cascading Style Sheets
CSS叫做层叠样式表,用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。
编写位置:
1,内联样式:
将样式编写到标签的style属性中
<p style="color:red;"></p>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接</title>
</head>
<p style="color:red;">
风起檐飞雪
沟壑巧遁形
置身大漠里
踏浪烟波中
</p>
</html>
效果:
如果对其他标签起作用,内联样式就需要复制到其他标签去,这样就显得比较麻烦,无法复用,不易维护。
2.内部样式表
将样式表编写到head中的style标签中
<style type="text/css"></style>
使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护
如下对所有的P元素进行样式设置,实现样式的复用
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>雪后漫步</title>
<style type="text/css">
P{
color:red;font-size:20px;
}
</style>
</head>
<p>
风起檐飞雪
沟壑巧遁形
</p>
<p>
置身大漠里
踏浪烟波中
</p>
</html>
效果:
缺点:比如我有多个html文件想要公用同一样式,如上两种方式就无法解决,引出如下的实现方式。
3.外部样式表
将样式表编写到外部的CSS文件中,然后通过link标签将外部文件引入
<link rel="stylesheet" type="text/css" href="文件的路径"/>
将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式
分别定义两个文件:
- style文件
- html文件
style.css文件:
P {
color: green;
font-size: 20px;
}
Demo1.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>雪后漫步</title>
<!-- <style type="text/css">
P{
color:red;font-size:20px;
}
</style>-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<p>
风起檐飞雪
沟壑巧遁形
</p>
<p>
置身大漠里
踏浪烟波中
</p>
</html>
效果:
Css基本语法:
Css注释:作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中
/* */
CSS的语法:
选择器{
声明块1;
声明块2;
}
选择器:
通过选择器可以选中页面中指定的元素,
并且将声明块中的样式应用到选择器对应的元素上
声明块:
声明块紧跟在选择器的后边,使用一对{}括起来,
声明块中实际上就是一组一组的名值对结构,
这一组一组的名值对我们称为声明,
在一个声明块中可以写多个声明,多个声明之间使用;隔开,
声明的样式名和样式值之间使用:来连接。
如:选择器就是p,声明块就是{}包住的地方。
P {
color: green;
font-size: 20px;
}
块元素,内联元素
div就是一个块元素
所谓的块元素就是会独占一行的的元素,无论他的内容有多少
他都会独占一整行。
p h1 h2 h3 ...
div这个标签没有任何语义,就是一个纯粹的块元素,
并且不会为它里边的元素设置任何的默认样式,
div元素主要用来对页面进行布局的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<div style="background-color: black;color: white;">春眠不觉晓</div>
<div style="background-color: green;color: red;">春眠不觉晓</div>
</body>
</html>
span是一个内联元素(行内元素)
所谓的行内元素,指的是只占自身大小的元素,不会占用一行
常见的内联元素:
a img iframe span
span没有任何的语义,span标签专门用来选中文字,然后为文字来设置样式
块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式,
一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素
a元素可以包含任意元素,除了他本身
p元素不可以包含任何块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/new_file.css" />
</head>
<body>
<span>春眠不觉晓</span>
<span style="color:red;font-size: 20;">处处闻啼鸟</span>
</body>
</html>
子元素和后代元素选择器
元素之间的关系
- 父元素:直接包含子元素的元素
- 子元素:直接被父元素包含的元素
- 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
- 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
- 兄弟元素:拥有相同父元素的元素叫做兄弟元素
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div> <div>
<span>我是body中的span元素</span>
</div>
为div中的span设置一个颜色为绿色
后代元素选择器
- 作用:
- 选中指定元素的指定后代元素
- 语法:
祖先元素 后代元素{}
#d1 span{
color: greenyellow;
}
为div的子元素span设置一个背景颜色为黄色
子元素选择器
- 作用:
- 选中指定父元素的指定子元素
- 语法:
父元素 > 子元素
IE6及以下的浏览器不支持子元素选择器
div > span{
background-color: yellow;
}
前端学习 -- Css的更多相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 前端学习---css基本知识
css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 前端学习——css实用技术
一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- Web前端学习——CSS
一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...
- 前端学习 -- Css -- 高度坍塌问题的产生以及解决
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...
- 前端学习 -- Css -- 浮动
块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...
- 前端学习 -- Css -- overflow
子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小.如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容.父元 ...
- 前端学习 -- Css -- display和Visibility
display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...
- 前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...
随机推荐
- Hadoop源码编译环境搭建
准备工具: maven 3.0.0版本或者更高版本(配置中心库) protocbuff 2.5.0 http://www.zlib.net/ git bash(Windows环境可以用此工具执行编译命 ...
- Oracle之带参存储过程(存储过程中for循环调用存储过程)
--带参存储过程create or replace procedure testdate(v in number) is i number; begin i:=v; insert into test_ ...
- spring boot+mybatis+swagger搭建
环境概述 使用的开发工具:idea 2018 3.4 环境:jdk1.8 数据库:MariaDB (10.2.21) 包管理:Maven 3.5 Web容器:Tomcat 8.0 开发机系统:Wind ...
- Kubernetes探索学习001--Centos7.6使用kubeadm快速部署Kubernetes集群
Centos7.6使用kubeadm快速部署kubernetes集群 为什么要使用kubeadm来部署kubernetes?因为kubeadm是kubernetes原生的部署工具,简单快捷方便,便于新 ...
- sprint2(第九天)
今天是sprint2的最后一天,已经完成功能有可以实现点餐功能.菜品的添加和删减.菜品数量的增减.添加备注.查看订单详情.订单状态.提交订单.后厨可以查看订单信息,对菜品的状态进行操作,是否完成烹饪, ...
- 私人助手(Alpha)版使用说明
私人助手使用说明 私人助手这款软件是通过添加事件提醒,提醒你在合适的时间做该做的事,可以选择有多种提醒模式. 目前实现了对事件的添加和提醒功能,软件现在的情况如下: 1.添加事件 2.删除事件 3.事 ...
- 判断二叉树B是否是树A的子树
如下图所示,则认为树B是树A的子树. 代码如下: /** public class TreeNode { int val = 0; TreeNode left = null; TreeNode rig ...
- 对象字典0x1005和0x1006的理解
SYNC不一定由主站产生,因此,产生SYNC的节点,0x1005对象的值一般是0x40000080,第30位为1表示本节点产生 SYNC,而本节点的0x1006对象就是产生同步周期值了;而接收SYNC ...
- Internet History, Technology and Security (Week 2)
Week 2 History: The First Internet - NSFNet Welcome to week 2! This week, we'll be covering the hist ...
- 虚拟机VMware中的CentOS字符界面和图形界面切换
在虚拟机中安装CentOS后展示的界面是图形用户界面,想切换到命令模式,于是查了linux下切换模式的方法,可是按了ctrl+alt+f1.f2....f7都是没用,后来发现是因为按键冲突的原因 问题 ...