web前端_css01
CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!---->
<style>
#i1{
background-color: #0d8ddb;
width: 100px;
height: 100px;
}
</style>
<!---->
<link rel="stylesheet" href="2_demo.css">
</head>
<body>
<!-- 增加css属性三种方式
1.直接在div标签中写
2.在<head></head>中写style标签，通过id选择器创建一个关系，通过'#'定位id
3.在css文件2_demo.css中写样式表,通过在head中的link标签引入到当前的html中
4.备注：id属性在一对<html></html>中只能出现一次
<div>标签中的style属性优先级最高，其余优先级由高至低是取决于离<div>标签的远近
展示4的效果需要注释<body>中的1，2，3 css文件中同样需要注释一下-->
<!---->
<div style="background-color: #c6ffc6;width: 100px;height: 100px">第一种方式背景色</div>
<!---->
<!-- <div id="i1" style="background-color: #c6ffc6;width: 100px;height: 100px">第一种方式背景色</div>-->
<!---->
<div id="i1">第二种方式背景色</div>
<!---->
<div id="i2">第三种方式背景色</div>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1*/
#i1{
background-color: rebeccapurple;
width: 100px;
height: 100px;
}
/*2*/
.c1{
background-color: rosybrown;
width: 100px;
height: 100px;
}
/*3*/
.c2{
width: 100px;
height: 100px;
}
.i2{
background-color: yellow;
}
.i3{
background-color: green;
}
/*4*/
div{
background-color: #c6ffc6;
}
/*5*/
div span{
background-color: red;
}
/*6*/
div[mh='strive']{
background-color: blue;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!----><!-- 通过id选择器(不允许重复，唯一，一对html标签中只允许有一个id选择器)定位div标签-->
<div id="i1">通过class选择器</div>
<!----><!-- 通过class(可重复，可共用)选择器定位div标签-->
<div class="c1">通过class选择器</div>
<div class="c1">通过class选择器</div>
<!----><!--不同颜色相同宽高的class重复，id唯一,class选择器属性允许多个，用空格分割-->
<div class="c2 i2">通过class1选择器</div>
<div class="c2 i3">通过class1选择器</div>
<!-- 4标签选择器 div没有宽，高，内容 在浏览器中显示就是一个点 肉眼看不见,所有的标签都是红色-->
<div class="c2">123</div>
<!-- 5层级选择器 用的较少-->
<div class="c2">
<span>
层级选择器
</span>
</div>
<!-- 6属性选择器(自定义的)-->
<div mh="strive">自定义的</div>
</body>
</html>
web前端_css01的更多相关文章
- Web前端需要熟悉大学里【高大上】的计算机专业课吗？
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
随机推荐
- 蓝鲸 修改主机名重装后初始化不了cmdb安装不了job + 数据采集流程
1.表象:在部署蓝鲸JOB过程中需要进行RabbitMQ的安装,数据初始化,激活步骤,此问题多发生在此过程 [ root@rbtnodel install)# ./bkcec initdata rab ...
- VC/MFC中的CComboBox控件使用详解
CComboBox控件详解 CComboBox控件又称作组合框控件,其有三种形态可供选择,1.简单组合框(Simple)2.下拉组合框(Drop-down)3.下拉列表式组合框(Drop-down l ...
- 西安邀请赛-L（打表找规律）
题目链接:https://nanti.jisuanke.com/t/39279 题意:给定n个不同的数表示的序列,定义两种操作:1. 交换前一半和后一半(如果有奇数个,则中间的不管).2. 交换每个偶 ...
- [转帖]Java 8新特性探究（八）精简的JRE详解
Java 8新特性探究(八)精简的JRE详解 https://my.oschina.net/benhaile/blog/211804 精简版的api 撸了今年阿里.网易和美团的面试,我有一个重要发 ...
- QQ登錄實現功能
<html> <head> <title></title> </head> <body> <form> <p& ...
- Jenkins的安装配置及使用
一.以Jenkins在tomcat容器里运行的方式,jenkins的安装及安装时所涉及的JDK和tomcat的配置 1.首先下载tomcat, 2.下载Jenkins.war包,将war包放在tomc ...
- 富文本编辑器-Ueditor传值
前两天研究了一下富文本编辑器Ueditor的使用和配置,并且我们已经可以正常的在页面上编辑内容到富文本编辑器中,那么我们如何将输入的内容传到数据库中呢 ? Listen carefully. 首先介绍 ...
- CSP前模板复习
Tarjan 求强连通分量 展开查看 #include #include #include using namespace std; const int N = 1e4 + 1e3; int n, m ...
- 自定义字段的设计与实现（Java实用版）
前言 自定义字段又叫做"开放模型",用户可以根据自已的需求,添加需要的字段,实现个性化定制. 使用自定义字段的目的,使用自定义字段解决哪些问题 如现有一套CRM系统,客户模块中客户 ...
- Java Integer中的IntegerCache小记
同事今天给我发了一个关于Java拆装箱的ppt,里面有这么一段代码 Integer c = Integer.valueOf(3); Integer d = Integer.valueOf(3); ...