day15 web前端之css
css的概念以及初体验
概念：
CSS（cascading style sheet）也就是层叠样式表；它是一种网页设计的新技术，现在已经被大多数浏览器所支持，层位网页设计必不可少的工具之一。
优点：
使得网页代码更少，网页下载速度更快
实现了内容和样式的分离，使得网站维护更加便捷
使得网站和浏览器兼容更好
css的编写方式
- css的语法结构
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在css的三个组成部分中，对象是很重要的，他指定了对那些网页元素进行设置，因此他有一个专门的名称---选择器
- 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="color: red;font-size: 30px">这是css的初体验</div>
</body>
</html>
- 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
font-size: 29px;
color: green;
}
</style>
</head>
<body>
<div>css的初体验2</div>
</body>
</html>
- 各种选择器
- id选择器：ID选择器的id一定要唯一，千万别重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*标签选择器*/
div{
font-size: 29px;
color: green;
}
/*id选择器*/
#two{
font-size: 50px;
color:red;
}
span{
color: yellow;
}
.three{
/*类选择器*/
color: deeppink;
}
.four span{
/*包含选择器*/
color: aquamarine;
font-size: large;
}
div,span,h2{
/*分组选择器*/
color: #3300cc;
}
*{
/*通用选择器*/
background-color: green;
color: #000;
}
</style>
</head>
<body>
<div>css的初体验2</div>
<div id="two">css的初体验2</div>
<div class="three">css的初体验2</div>
<div class="three">css的初体验3</div>
<span>spawn标签</span>
` <div class="four">
<span>这是css里的spawn标签</span>
</div>
<h2>h2元素</h2>
<input type="text">
</body>
</html>
- 选择器的优先级：行内选择器>id选择器>类选择器>标签选择器>通用选择器
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#show1{color:yellow}
.show{color:pink}
h1{color: red}
*{color:green}
</style>
</head>
<body>
<h1 id="show1" class="show" >这是选择器优先级设置</h1>
</body>
</html>
- 外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="a.css">
<style type="text/css">
</style>
</head>
<body>
<div>css的初体验2</div>
<div id="two">css的初体验3</div>
<div class="three">css的初体验3</div>
<div class="three">css的初体验3</div>
<span>spawn标签</span>
` <div class="four">
<span>这是css里的spawn标签</span>
</div>
<h2>h2元素</h2>
<input type="text">
</body>
</html>
css样式文件如下：
#show1{color:yellow}
.show{color:pink}
h1{color: red}
css的基本属性
- 文字、段落、背景属性
css的布局属性
浏览器兼容性问题
day15 web前端之css的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
随机推荐
- 直接在安装了redis的Linux机器上操作redis数据存储类型--List类型
一.概述: 在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的元素.在插入时,如果该键并不存在,Redis ...
- C# Action 和Func
https://www.cnblogs.com/LipeiNet/p/4694225.html
- 日志lombok插件安装及配置
安装lombok插件 下载Lombok.jar http://projectlombok.googlecode.com/files/lombok.jar 运行Lombok.jar java -jar ...
- 【模板】矩阵快速幂 洛谷P2233 [HNOI2002]公交车路线
P2233 [HNOI2002]公交车路线 题目背景 在长沙城新建的环城公路上一共有8个公交站,分别为A.B.C.D.E.F.G.H.公共汽车只能够在相邻的两个公交站之间运行,因此你从某一个公交站到另 ...
- LAMP标准化安装
操作系统说明: 操作系统 版本 linux red hat release 6.4 关键软件包说明: 软件包 版本 目录 运行用户 httpd-2.2.27.tar.gz 2.2.27 /usr/lo ...
- 一款你不容错过的Laravel后台管理扩展包 —— Voyager – Laravel学院
1.简介 Voyager是一个你不容错过的Laravel后台管理扩展包,提供了CRUD操作.媒体管理.菜单构建.数据管理等操作. 官网:https://the-control-group.github ...
- Django项目：CRM(客户关系管理系统)--03--02PerfectCRM创建ADMIN页面01
八．CRM项目创建king_admin python.exe manage.py startapp king_admin 'king_admin', 九．CRM项目分发URL "" ...
- Hdu 4751(2-SAT)
题目链接 Divide Groups Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- Spring_代理
1.代理模式. 2.静态代理原理及实践. 3.动态代理原理及实践. 4.Spring AOP原理及实战. 静态代理原理及实践 package test.staticProxy; // 接口 publi ...
- ecshop二次开发之视频上传
1.前台展示效果: 2.后台展示效果: 3.代码实现: 后台实现过程: 1.在languages/zh_cn/admin/goods.PHP中插入 $_LANG['tab_video'] = '视频上 ...