web前端 CSS基础
简单的CSS文件
<style type="text/css">
a{
color:rebeccapurple;
font-size: larger;
font-weight: 900;
} p{
background-color: gold;
font-size: larger;
font-weight: 900;
} </style>
CSS的四种引用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <!--内嵌式-->
<!--<style>-->
<!--p {-->
<!--background-color: blue;-->
<!--}-->
<!--</style>--> <!--导入式-->
<!--<style>-->
<!--@import "index.css";-->
<!--</style>--> <!--链接式-->
<link rel="stylesheet" href="index.css"> </head>
<body> <!--行内式-->
<div style="color:red;background-color: aqua">HELLO</div>
<p>HELLO WORLD</p> </body>
</html>
选择器
基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> /*标签选择器*/
p{
background-color: rebeccapurple;
} /*id选择器*/
#p2{
background-color: rebeccapurple;
} /*class选择器*/
.p_ele{
color: gold;
} /*通用选择器*/
*{
background-color: green;
} </style>
</head> <body> <p class="p_ele">PPP1</p>
<p id="p2">PPP</p>
<p class="p_ele">PPP3</p> <div>DIV</div> <span>SPAN</span> </body> </html>
组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style> /*后代选择器*/
.inner p{
color: red;
} .outer p{
color: red;
} /*子代选择器*/
.outer > p{
color: red;
} /*多元素选择器*/
.inner p,.p4{
color: red;
} /*毗邻选择器 */
.outer + p{
background-color: red;
} /*兄弟选择器*/
.outer ~ p{
color: red;
} ul.item li{
color: red;
} div.c1{
color: red;
}
</style>
</head> <body>
<div class="c1">c1</div> <div class="outer">
<p>P1</p>
<div class="inner">
<p>P3</p>
</div>
<p>P2</p>
<a href="">click</a>
</div> <a href="">aaa</a>
<p>P5</p> <p class="p4">P4</p> <ul class="item">
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
</ul> <ol class="item">
<li>222</li>
<li>222</li>
<li>222</li>
<li>222</li>
</ol> <ul>
<li>222</li>
<li>222</li>
<li>222</li>
<li>222</li>
</ul> </body> </html>
web前端 CSS基础的更多相关文章
- Web前端开发基础 第一天（Html和CSS）
学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...
- 网络统计学与web前端开发基础技术
网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 现代前端技术解析：Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...
- Web前端之基础知识
学习web前端开发基础技术须要掌握:HTML.CSS.Javascript 1.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,能够包括文字.图片.视频等. 2.CSS样式 ...
- Web前端-Ajax基础技术(下)
Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...
- Web前端-Ajax基础技术(上)
Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
随机推荐
- 【python模块】——logging
python学习——logging模块
- 「赛后补题」HBCPC2018题目代码与思路简析
这次比赛(2018年第二届河北省大学生程序设计竞赛)虽然没有打,但是题目还是要写的.未完成的题目(还差比较硬核的四题)和思路分析会陆续更新完. Problem A 2011 Mex Query /* ...
- Python-学习-小例子练习
网上了点小例子,练习一下下,都是特别简单的.而且这些代码也都是找的网上的代码,目的是在于练习一下Python和熟悉下Python的编码风格等等 学习一门语言,最快的方法就是把它用在世界的开发中,这样才 ...
- 简单的素数问题(C++)
[问题描述] 已知三个素数的和为 n ,正整数 n 由键盘输入,计算并输出这三个素数乘积的最大值. [代码展示] # include<iostream>using namespace st ...
- ADVICE FOR SHORT-TERM MACHINE LEARNING RESEARCH PROJECTS（短期机器学习研究的建议）
– Tim Rocktäschel, Jakob Foerster and Greg Farquhar, 29/08/2018 Every year we get contacted by stude ...
- [Effective Python] 用Pythonic方式来思考
Effective Python chap.1 用Pythonic方式来思考 Pythonic: 一门语言的编程习惯是由用户来确立的. 1. 确认自己所使用的Python版本 2. 遵循PEP8风格指 ...
- BZOJ 3998 TJOI2015 弦论 后缀自动机+DAG上的dp
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3998 题意概述:对于一个给定长度为N的字符串,求它的第K小子串是什么,T为0则表示不同位置 ...
- onkeypress,onkeyup,onkeydown区别
onkeypress 这个事件在用户按下并放开任何字母数字键时发生.系统按钮(例如,箭头键和功能键)无法得到识别. onkeyup 这个事件在用户放开任何先前按下的键盘键时发生. onkeydown ...
- js把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
最近在做项目的时候,需要把后台返回的时间转换成几秒前.几分钟前.几小时前.几天前等的格式:后台返回的时间格式为:2015-07-30 09:36:10,需要根据当前的时间与返回的时间进行对比,最后显示 ...
- iMuseum
iMuseum 每日环球展览 iMuseum https://itunes.apple.com/cn/app/%E6%AF%8F%E6%97%A5%E7%8E%AF%E7%90%83%E5%B1%95 ...