前端基础之css
一、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的更多相关文章
- 前端基础:CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 02 前端基础之CSS
目录 前端基础之CSS css简介 基本选择器(重要) 组合选择器(重点) 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 字体相关 背景属性 边框属性 display属性 盒子模型 ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- 2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)
品优购项目(一) 目标: 能会引入ico图标 能简单看懂网站优化的三大标签 能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电 ...
- 前端基础之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端基础之---css
css 介绍 css 规则有两个主要的部分构成 : 选择器 , 以及一条或多条声明. 现在的互联网前端分为三层 : ● HTML :超文本标签机语言,从语义的角度描述页面结构. ● CSS : 层 ...
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 前端基础系列——CSS规范(文章内容为转载)
原作者信息 作者:词晖 链接:http://www.zhihu.com/question/19586885/answer/48933504 来源:知乎 著作权归原作者所有,转载请联系原作者获得授权. ...
随机推荐
- 安装完iis后本机用IP可以访问,别的电脑不能访问
局域网IIS无法访问的解决方法 无法访问局域网内其它电脑中的IIS,自己可以访问,但别的电脑不行一般发生这种情况时操作系统是XP第二版. 具体操作如下:1.打开控制面版2.打开Windows防火墙 5 ...
- C++模板之Vector与STL初探
STL源码初步接触 STL = Standard Template Library,直译过来是:标准模板库,是惠普实验室开发的一系列软件的统称.从根本上说,STL是一些"容器"的集 ...
- 打造基于Clang LibTooling的iOS自动打点系统CLAS(一)
1. 手动打点的弊端 在很多ios工程师的日常工作中,不但要对接产品提出的功能性需求,还会收到产品出于数据统计分析需求目的而提出的附带的隐形需求:统计打点.大多数公司的基础框架层都会对统计打点功能做高 ...
- C语言 入门程序
#include "stdio.h" #include "stdlib.h" #include "string.h" #define MAX ...
- 使用Java模拟一个简单的Dos学生成绩管理系统:
使用Java模拟学生成绩管理系统... ------------------- 学生成绩管理系统:需要实现的功能:1.录入学生的姓名和成绩2.显示列表.列表中包括学生姓名与成绩3.显示最高分.最低分的 ...
- Java 调用Azure认知服务Demo--Computer API
说明 本文主要介绍使用Java代码,基于HTTP请求调用Microsoft Azure的认知服务.图片来源分别介绍了使用公网的URL和上传本地图片. 依赖的jar包下载地址: key的获取需要登录到A ...
- [2012-05-31]awk记录分割符RS
$awk -v RS= '{print $1}' test RS 默认值为\n 换行符. 此处设置RS= 等效于 RS="" 代表一个空行 (若理解有误请指正,在以下例子中符合) ...
- Grails笔记二:grails 2.4.3版本下generate-*失效问题解析
最近在学grails框架,因为其敏捷性让我非常喜欢,不过有点让人恼怒的是也许因为grails框架太新了,所以关于grails的书籍很少,而且市面上的书籍大部分都是2007或者2009年的,官方文档又都 ...
- ssh的相关实验
author:JevonWei 版权声明:原创作品 跨主机ssh连接 主机A想连接主机C,但是主机C防火墙等原因禁止主机A连接,而主机A可以连接主机B,主机B也可连接主机C,即主机A就可通过主机B做跳 ...
- NET .NET深入体验和实战精要
在学习.NET之前要充分理解基础,在这里将基础的知识点一一列举. 万丈高楼平地起 1.命名空间 命名空间是一种特殊的分类机制,他将与一个特定功能集有关的所有类型都分到一起,是.避免类名冲突的一种方式 ...