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. ...
随机推荐
- beego 入门 - 常见错误
参考网址:http://beego.me/quickstart 按照官网教程,执行命令 $ go get github.com/astaxie/beego $ go get github.com/be ...
- HTTP_REFERER的用法及伪造
引言 在php中,可以使用$_SERVER[‘HTTP_REFERER’]来获取HTTP_REFERER信息,关于HTTP_REFERER,php文档中的描述如下: “引导用户代理到当前页的前一页的地 ...
- java opencv 4.0.1安装配置
如果没有把dll扔到jdk会报错 Exception in thread "AWT-EventQueue-0" java.lang.UnsatisfiedLinkError: no ...
- fedora python访问mysql
1 下载驱动库 http://sourceforge.net/projects/mysql-python/ 2, yum install mysql-dev* yum install python-d ...
- 数据库----SQL基本查询
SQL基本查询 查表 :show create table 表名(show tables); describe 表名:(desc 表名)// 模糊查询:show table like '%c%';(查 ...
- IO流3 --- File类的常用方法2 --- 技术搬运工（尚硅谷）
File类的判断功能 @Test public void test5(){ File file = new File("hello.txt"); //判断是否是文件目录 Syste ...
- 想真正了解JAVA设计模式看着一篇就够了。 详解+代码实例
Java 设计模式 设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结 设计模式分为 23 种经典的模式,根据用途我们又可以分为三大类.分别是创建型模式.结构型模式和行为型模式 列举几种设 ...
- win10 ubuntu 双系统启动顺序设置
之前安装ubuntu的时候就遇到过这个问题, 当时解决了,设置成开始可以选择启动ubuntu系统还是win系统. 但是过了好久后又忘记了,最近win10开了一次安全模式启动后,一开机就是win10,u ...
- python之特点
.python区分大小写:2.注释规范:python使用井号#作为单行注释,且注释的位置,一般放在要注释代码的前一行或这代码的右侧:多行注释则可以用连续三个单引号开始一行,并连续三个单引号在要注释的代 ...
- 蚁群算法MATLAB解TSP问题
Excel表exp12_3_1.xls中数据为: clc clear all [xdata,textdata]=xlsread('exp12_3_1.xls'); %加载20个城市的数据,数据按照表格 ...