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="文件的路径"/>

  将样式编写到外部样式表中,可以在不同的页面中使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式

  分别定义两个文件:

  1. style文件
  2. 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>

子元素和后代元素选择器

元素之间的关系

  1. 父元素:直接包含子元素的元素
  2. 子元素:直接被父元素包含的元素
  3. 祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
  4. 后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
  5. 兄弟元素:拥有相同父元素的元素叫做兄弟元素
<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的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. 前端学习——css实用技术

    一,css控制文本样式 文本相关的css属性有很多,包括: color;font-size;font-weight;text-transform(大小写uppercase等);text-decorat ...

  4. 前端学习——css基础知识,选择器与html模板、值得收藏的html标签

    一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...

  5. Web前端学习——CSS

    一.CSS简介CSS全称cascading style sheeding,层叠样式列表.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化.二.CSS组成1.选择器(1) ...

  6. 前端学习 -- Css -- 高度坍塌问题的产生以及解决

    在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. 由于 ...

  7. 前端学习 -- Css -- 浮动

    块元素在文档流中默认垂直排列,所以这个三个div自上至下依次排开,如果希望块元素在页面中水平排列,可以使块元素脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值: none,默认值,元素 ...

  8. 前端学习 -- Css -- overflow

    子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小.如果子元素的大小超过了父元素的内容区,则超过的大小会在父元素以外的位置显示,超出父元素的内容,我们称为溢出的内容.父元 ...

  9. 前端学习 -- Css -- display和Visibility

    display 将一个内联元素变成块元素,通过display样式可以修改元素的类型.可选值: 1 inline:可以将一个元素作为内联元素显示. 2 block: 可以将一个元素设置块元素显示. 3 ...

  10. 前端学习 -- Css -- 内联元素的盒模型

    内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...

随机推荐

  1. Hadoop源码编译环境搭建

    准备工具: maven 3.0.0版本或者更高版本(配置中心库) protocbuff 2.5.0 http://www.zlib.net/ git bash(Windows环境可以用此工具执行编译命 ...

  2. Oracle之带参存储过程(存储过程中for循环调用存储过程)

    --带参存储过程create or replace procedure testdate(v in number) is i number; begin i:=v; insert into test_ ...

  3. spring boot+mybatis+swagger搭建

    环境概述 使用的开发工具:idea 2018 3.4 环境:jdk1.8 数据库:MariaDB (10.2.21) 包管理:Maven 3.5 Web容器:Tomcat 8.0 开发机系统:Wind ...

  4. Kubernetes探索学习001--Centos7.6使用kubeadm快速部署Kubernetes集群

    Centos7.6使用kubeadm快速部署kubernetes集群 为什么要使用kubeadm来部署kubernetes?因为kubeadm是kubernetes原生的部署工具,简单快捷方便,便于新 ...

  5. sprint2(第九天)

    今天是sprint2的最后一天,已经完成功能有可以实现点餐功能.菜品的添加和删减.菜品数量的增减.添加备注.查看订单详情.订单状态.提交订单.后厨可以查看订单信息,对菜品的状态进行操作,是否完成烹饪, ...

  6. 私人助手(Alpha)版使用说明

    私人助手使用说明 私人助手这款软件是通过添加事件提醒,提醒你在合适的时间做该做的事,可以选择有多种提醒模式. 目前实现了对事件的添加和提醒功能,软件现在的情况如下: 1.添加事件 2.删除事件 3.事 ...

  7. 判断二叉树B是否是树A的子树

    如下图所示,则认为树B是树A的子树. 代码如下: /** public class TreeNode { int val = 0; TreeNode left = null; TreeNode rig ...

  8. 对象字典0x1005和0x1006的理解

    SYNC不一定由主站产生,因此,产生SYNC的节点,0x1005对象的值一般是0x40000080,第30位为1表示本节点产生 SYNC,而本节点的0x1006对象就是产生同步周期值了;而接收SYNC ...

  9. 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 ...

  10. 虚拟机VMware中的CentOS字符界面和图形界面切换

    在虚拟机中安装CentOS后展示的界面是图形用户界面,想切换到命令模式,于是查了linux下切换模式的方法,可是按了ctrl+alt+f1.f2....f7都是没用,后来发现是因为按键冲突的原因 问题 ...