HTML/CSS基础与介绍
CSS介绍css
CSS是指层叠样式表，CSS样式表极大的提升了工做效率html
CSS基础语法
1. 首先选择一个属性
2. 选择了属性之后，用大括号括起来
3. 括号里面是对应的属性和属性值，如：学习
selector {htm
property: value;utf-8
}it
举一个实际的例子，就像这样：class
h1是属性，而后一个大括号，括号中的color是属性，后面跟着对应的属性值red，设置结束后须要用;来分别各个属性test
h1 {效率
color: red;基础
font-size: 14px;
}
使用CSS样式：
须要在html中来使用CSS样式，能够用<link>标签来调用CSS文件，如：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>我被CSS改变了。</h1>
</body>
</html>
CSS选择器分组：
选择器分组就是将一堆页面元素，一块儿定义：
h1, h2, h3, p, a{
color: red;
font-size: 14px
}
CSS派生类选择
根据元素在其位置的上下文关系来定义样式，就好比标签中的标签，若是直接定义body元素，就会把其中全部的值都改变，可是单单针对某些元素来定义，也是能够的。固然针对一个元素定义的样式的优先级，要比定义<body>所有样式的优先级高。因此即便是<body>修改了样式，也能够针对单个元素进行修改。
以下代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<!-- 标签中的标签 -->
<body>
<p>我是小p，我是body p{}指定的标签改变的</p>
<h1>我是标题</h1>
</body>
</html>
而后咱们用CSS样式来修改
body{
color: green;
}
body p{
color: red;
}
能够看到，将body所有定义成绿色了，可是若是指定body中的p元素进行定义，仍是能够将其改变颜色的。因此指定的元素的优先级要比所有定义的高。相反没有指定定义的h1标题，就是绿色。
ID选择器
id选择器能够为标有id的HTML元素指定特定的样式，id选择器以“#”来定义。id选择经常用于简历派生选择器，他们常常一块儿来使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="testid">
呵呵呵呵
<p>哈哈哈，我被指定定义了颜色，id与元素常常一块儿使用！</p>
</div>
</body>
</html>
/*id能够直接用#号来表示*/
#testid{
color: green;
}
#testid p{
color: red;
}
CSS类选择器
类选择器是以一个点“.”来显示的，class也能够结合派生选择器来一块儿使用，好比定义了一个元素<div class="testclass">
利用CSS能够以下修改：
/*class能够须要用“.”来表示*/
.testclass{
color: green;
}
.testclass p{
color: red;
}
属性选择器：
属性选择器就是针对标签中的属性来进行修改，固然，也能够根据属性的值，来针对性的修改：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<ol type="I">
<li>属性选择器</li>
<li>属性选择器</li>
<li>属性选择器</li>
</ol>
<ol type="1">
<li>属性选择器</li>
<li>属性选择器</li>
<li>属性选择器</li>
</ol>
<ol type="a">
<li>属性选择器</li>
<li>属性选择器</li>
<li>属性选择器</li>
</ol>
</body>
</html>
而后用CSS来修改
/*若是没有值，经过属性修改所有的样式*/
[type]{
color: red;
}
/*有值的话，就是针对值进行修改*/
[type="a"]{
color: green;
}
总结：
主要学习了CSS的用法，已经派生选择器的使用，id选择器的使用，class选择器的使用和属性选择器的使用
id---以“#”开头
class---以“.”开头
属性选择器---以[]在括号类填写属性和值
派生选择器---直接调用标签，如：<p>{}
- 1. HTMLCSS学习之CSS基础
- 2. Cookie与Session基础介绍
- 3. Hbase--基础介绍
- 4. phpstudy基础介绍
- 5. vuex 基础介绍
- 6. Javaweb基础介绍
- 7. java基础介绍
- 8. HTML基础介绍
- 9. python基础介绍
- 10. Ansible 基础-介绍
- 更多相关文章...
- • Spring目录结构和基础JAR包介绍 - Spring教程
- • Kotlin 基础语法 - Kotlin 教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
- • Kotlin学习（二）基本类型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解决方法
- 2. Qt5.7以上调用虚拟键盘(支持中文)，以及源码修改(可拖动，水平缩放)
- 3. 软件测试面试- 购物车功能测试用例设计
- 4. ElasticSearch（概念篇）：你知道的, 为了搜索…
- 5. redux理解
- 6. gitee创建第一个项目
- 7. 支持向量机之硬间隔（一步步推导，通俗易懂）
- 8. Mysql 异步复制延迟的原因及解决方案
- 9. 如何在运行SEPM配置向导时将不可认的复杂数据库密码改为简单密码
- 10. windows系统下tftp服务器使用
- 1. HTMLCSS学习之CSS基础
- 2. Cookie与Session基础介绍
- 3. Hbase--基础介绍
- 4. phpstudy基础介绍
- 5. vuex 基础介绍
- 6. Javaweb基础介绍
- 7. java基础介绍
- 8. HTML基础介绍
- 9. python基础介绍
- 10. Ansible 基础-介绍