一、form表单

在form表单有两个重要的属性分别是：

              关于表单两个属性： name： 作为发送server端的数据的键
                                                value：作为发送server端的数据的值

标签嵌套原则： 块级标签可以嵌套 块级、内联  但是内联只能嵌套内联标签

二、css的引入方式：

1、行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

<p style="color: rebeccapurple">P3</p>

2、嵌入式

      嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中

<style>

p {  color: red;

  background-color: wheat;

}

</style>
3.链接式
  将一个.css文件引入到HTML文件中
    <link rel="stylesheet" href="index.css">

4、导入式

三、css选择器

1、基本选择器

一、标签选择器
只要是选择的那个标签下的，所有的都要跟着变化
如：div{color:red;

}

2、id选择器

因为id是唯一的，选择id的标签下的，随着变化

如： #p2{
color:red;

}

切记切记切记！
id中的那个标签前面的#要加上

3、class选择器

在class下面的多个标签，前面要加 .(点)，这样class下面的标签才发生变化

如： .c1{
color:red;

}

4.所有选择器
所有选择器是*代表
如： *{
color:red;

}

二、组合选择器
1、后代选择器
在父类下的所有和后代匹配的都会发生变化
如： .c2 p{
color:red;

}

2.子代选择器

和父类匹配上只有在父类下的匹配会发生变化（比如父类下只有儿子符合，孙子就不符合只能除外）
如： .c2>p{
color: red;
}

3.毗邻选择器

和父类匹配上但只能和父类相邻的会发生变化，只能是同级元素（注意：只能往下不能往上）
如： .c2+p{
color: red;
}

4.兄弟选择器
只要能和父类匹配上，那么父类下的所有都符合

如： .c2~p{
color: red;
}

5.多元素选择器

父类下所有的一一对应匹配的都会发生变化
如： .c2 .c3,.c2~.c3{
color: red;
background-color: green;
font-size: 15px;
}

 










												


											
前端基础之css的更多相关文章
	

    
						
  1. 前端基础：CSS样式选择器
		
    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
    
		
    2. 
						
  2. 前端第二篇---前端基础之CSS
		
    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...
    
		
    3. 
						
  3. 02 前端基础之CSS
		
    目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
    
		
    4. 
						
  4. Web前端基础(4):CSS(一)
		
    1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
    
		
    5. 
						
  5. 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)
		
    品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...
    
		
    6. 
						
  6. 前端基础之css样式（选择器）
		
    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
    
		
    7. 
						
  7. 前端基础之---css
		
    css  介绍 css 规则有两个主要的部分构成 : 选择器  , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...
    
		
    8. 
						
  8. Web前端基础(5):CSS(二)
		
    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
    
		
    9. 
						
  9. 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
		
    HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
    
		
    10. 
						
  10. 前端基础系列——CSS规范（文章内容为转载）
		
    原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权.  ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Wincc flexable的按钮组态
			
    1.题目 2.画面切换按钮组态 1)新建变量 2)组态画面进行命名 3)组态按钮常规 4)组态按钮属性 5)在事件中选择单击,系统函数中选择画面中的ActivateScreen函数切换画面 3.给变量 ...
    
			
    2. 
						
  2. java核心技术卷一笔记(1)
			
    jdk是java开发工具包,里面包含了javac.jar.javadoc.java等工具,可以在bin目录中找到.有一个文件夹是jre,即jdk也包含了java运行环境.jre可单独安装,只是运行ja ...
    
			
    3. 
						
  3. Struts2学习笔记(一)——环境搭建
			
    1.创建Web项目并导入Struts2的主要jar包 在MyEclipse中新建Web项目,然后在lib目录下添加必须的jar包: 2.创建jsp页面 1).创建test.jsp页面: <bod ...
    
			
    4. 
						
  4. spring boot / cloud (六) 开启CORS跨域访问
			
    spring boot / cloud (六) 开启CORS跨域访问 前言 什么是CORS? Cross-origin resource sharing(跨域资源共享),是一个W3C标准,它允许你向一 ...
    
			
    5. 
						
  5. Spring详解（二）------IOC控制反转
			
    我相信提到 Spring,很多人会脱口而出IOC(控制反转).DI(依赖注入).AOP等等概念,这些概念也是面试官经常问到的知识点.那么这篇博客我们就来详细的讲解 IOC控制反转. ps:本篇博客源码 ...
    
			
    6. 
						
  6. d3.js多个x轴y轴canvas柱状图
			
    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...
    
			
    7. 
						
  7. ORA-06575:程序包或函数处于无效状态
			
    今天一个朋友问我下面这段sql语句的问题,我发现了他竟然把程序员的编程思想带入了oracle,虽然是错误的,但也是很经典的错误啊. create or replace package p_view_p ...
    
			
    8. 
						
  8. Ext.grid.EditorGridPanel分页和查看全部
			
    在gridPanel添加查看全部数据按钮,必须使得每页显示的数量pageSize为总条数,那么总页数就只会有一页. 1.获取store数据的总条数 var totalCount = grid.getS ...
    
			
    9. 
						
  9. zip7压缩
			
    7-zip 解压 1.引入依赖文件 sevenzipjbinding.jar sevenzipjbinding-Allwindows.jar <!-- https://mvnrepository ...
    
			
    10. 
						
  10. python爬虫scrapy框架——人工识别知乎登录知乎倒立文字验证码和数字英文验证码
			
    目前知乎使用了点击图中倒立文字的验证码: 用户需要点击图中倒立的文字才能登录. 这个给爬虫带来了一定难度,但并非无法解决,经过一天的耐心查询,终于可以人工识别验证码并达到登录成功状态,下文将和大家一一 ...
    
			
    11.