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. ...
随机推荐
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- 使用Charles在iOS6上进行抓包
抓取Web页面的网络请求很容易,Chrome和Firefox都很容易做到.iOS APP如何抓包呢?其实也很容易,我比较喜欢使用 Charles. 我用的是Mac电脑,首先建立一个热点,然后让iOS设 ...
- Django-2.2.1学习感悟
或许是看的教程比较老,跟不上2.2.1版本的Django,所以在编写代码时可以说是bug不断,这算是编程必经阶段 每当遇到django的bug logging,先看头几行再看最后几行,能自己解决最好, ...
- Python学习（一） 安装，环境搭建，IDE
第一篇废话太多了,我的博客最主要的是给自己看的,大家觉得还凑合也可以看看,能说自己想法的就更好了,因为一个人的思想是有局限性的.集思广益,自己的认知才不会被禁锢. 注:其他的系统没装,在Windows ...
- centos下彻底删除mysql
打算重新试试安装两个mysql,就把老的删除了. yum remove mysql mysql-server mysql-libs compat-mysql51 rm -rf /var/lib/mys ...
- day37 02-Hibernate二级缓存：二级缓存的散装数据
一级缓存存放的是对象的地址.把对象的地址缓存下来了.二级缓存里面存放的是对象的散装数据.你再去获取的时候,因为一级缓存的生命周期结束了,它会从二级缓存中获取.从二级缓存中获取,因为它又会得到一个对象. ...
- Python实例 类和继承
class Base: def __init__(self): self.data = [] def add(self, x): self.data.a ...
- 微信网页授权demo1
要授权首先要网页域名授权 然后就index.php代码如下 <?php require_once("./function.php"); $url = 'http://'.$_ ...
- 云原生交付加速！容器镜像服务企业版支持 Helm Chart
2018 年 6 月,Helm 正式加入了 CNCF 孵化项目:2018 年 8 月,据 CNCF 的调研表明,有百分之六十八的开发者选择了 Helm 作为其应用包装方案:2019 年 6 月,阿里云 ...
- SVN经常使用操作
版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/Jerome_s/article/details/27950055 Subversion(简称svn)安装 ...