HTML第四章:初始css
CSS样式:
一、为什么要使用CSS;可以让页面更美观.有利于开发速度.
二、什么是CSS;全称cascading style sheet层叠样式表.(级联样式表).
简称css,css主要负责页面美化、负责样式,html负责内容.
在html开发中内容和美化应该尽可能实现分离.
三、css使用场景.在html开发中尽可能都会用到css样式.比如.
京东.淘宝.以及各大小网络都在用.是最普及的html页面美化语言
四、怎么使用css.
优势:1. 内容和表现分离.
2.页面表现统一.容易修改.
3.丰富的样式使页面更加灵活.
4.减少了页面代码量.增加里浏览速度和节省网络带宽.
5.使用独立于页面的css. 有利于搜索引擎收录.
基本结构:
选择器名称{
样式1:值:
样式2:值:
}
引用方式:
1.行内样式:在标签中设置style属性.
例子:<p style="color:red;">内容</p>
2.内部样式:在head标签中设置style属性.
例子:< style="text/css"> </style>
3.外部样式:在head标签中设置link标签.
链接式:在head标签中使用link标签.
例子:<link href="css文件路径" rel="stylesheet" type="text/css"/>
4.注意:使用外部css样式必须要把css代码放在css文件里,这样才可以被html引用.
导入式:在style标签里面声明导入式.
例子:<style="text/css">
@import url(css文件路径.)
</style>
链接式和导入式的区别:
(1)link属于xhtml, import属于css2.1
(2)link先加载css到页面里.在编译显示.
import先显示页面结构.在加载css到页面里.
(3)对于不兼容css2.1的浏览器. import无效.
ps:样式优先级:遵循就近原则,离标签越近越优先
行内>内部>外部
五、选择器:
1、基本选择器.
a.标签选择器.
b.类选择器.
c.id选择器.
例子:标签选择器就是选择器名称是标签名.
h1{} p{}
类选择器就是选择器名称以.开头,并且标签设置了class属性.
<p class="p1"></p> #p1{}
<p class="p2"></p> #p2{}
一个id选择器只能被一个标签设置,可以有多个id选择器
选择器优先级:id选择器>类选择器>标签选择器.
2、层次选择器:
a:后代选择器. body p{}设置body里面所有P标签
不管是儿子辈还是孙子辈都被设置
注意body和p之间用空格隔开.
b:子选择器.body>p{}//设置body里面儿子辈的p标签
body和p之间用>
c:相邻兄弟选择器:p+ol{}//设置p标签后面的一个ol标签,必须是同辈元素,不能是子孙及以及下辈分.
p和ol用+
d:通用兄弟选择器:p~ol{}//设置p标签后面所有的ol标签。
必须是同辈元素.不能是孙子及以下辈分.p和ol用~
HTML第四章:初始css的更多相关文章
- 第四章 初始CSS
一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在hea ...
- 第四章初始CSS3预习笔记
第四章 初始CSS3预习笔记 一: 1: 什么是CSS? 全称是层叠样式表;/通常又称为风格样式表,.他是用来进行网页风格设计的; 2:CSS的优势: 1>内容以表现分离,即使用u前面学习的HT ...
- web—第四章css&第五章
web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个cs ...
- [CSS]《CSS揭秘》第四章——视觉效果
投影 单侧投影 box-shadow:0px 10px 10px -5px black; 邻边投影 box-shadow:10px 10px 10px 2px black; 双侧投影 box-shad ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 《Linux内核设计与实现》读书笔记 第四章 进程调度
第四章进程调度 进程调度程序可看做在可运行太进程之间分配有限的处理器时间资源的内核子系统.调度程序是多任务操作系统的基础.通过调度程序的合理调度,系统资源才能最大限度地发挥作用,多进程才会有并发执行的 ...
- 精通Web Analytics 2.0 (6) 第四章:点击流分析的奇妙世界:实际的解决方案
精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第四章:点击流分析的奇妙世界:实际的解决方案 到开始实际工作的时候了.哦耶! 在本章中,您将了解到一些最重要的网络分析报告,我将 ...
- 读《编写可维护的JavaScript》第四章总结
第四章 变量 函数和运算符 4.1 ① 变量声明 变量声明是通过var语句来完成的,并且所有的var语句都提前到包含这段逻辑的函数的顶部执行. function doSomething() { + v ...
- KnockoutJS 3.X API 第四章 表单绑定(11) options绑定
目的 options绑定主要用于下拉列表中(即<select>元素)或多选列表(例如,<select size='6'>).此绑定不能与除<select>元素之外的 ...
- 《Android群英传》读书笔记 (2) 第三章 控件架构与自定义控件详解 + 第四章 ListView使用技巧 + 第五章 Scroll分析
第三章 Android控件架构与自定义控件详解 1.Android控件架构下图是UI界面架构图,每个Activity都有一个Window对象,通常是由PhoneWindow类来实现的.PhoneWin ...
随机推荐
- 解决eclipse双击类名、选中类名出现假死或者非常慢的问题(取消Eclipse鼠标悬停和自定义快捷键)
eclipse(MyEclipse)关闭鼠标移动提示代码功能和自定义快捷键代码提示设置的方法 eclipse(MyEclipse)关闭鼠标移动提示代码功能: eclipse(MyEclipse)--& ...
- POJ1034 The dog task
题目来源:http://poj.org/problem?id=1034 题目大意: 一个猎人在遛狗.猎人的路径由一些给定的点指定.狗跟随着猎人,要与主人同时到达那些指定的点.在丛林里有一些有趣的地方, ...
- js 为对象添加和删除属性
对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...
- React学习记录
托webpack的福,我终于可以开始写React了.==ORZ 我感觉我接近webpack工程师更进一步了哈哈哈. 以下所有内容均来自小红书,仅是我的个人记录,如想系统学习,请移步:React小书 : ...
- 6、kvm克隆虚拟机
kvm克隆有两种方法可以使用先暂停kvm虚拟机 virsh suspend privi-server 方法一:对虚拟机本身直接clone virt-clone -o privi-server -n p ...
- [Leetcode]006. ZigZag Conversion
public class Solution { public String convert(String s, int nRows) { if (s == null || s.isEmpty() || ...
- ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven(约束第K短路)
题意:求11到nn的第kk短的路径长度,如果超过TT输出Whitesnake!Whitesnake!,否则输出yareyaredawayareyaredawa. 好无以为 , 这就是一道模板题, 当是 ...
- Unity UGUI按钮添加点击事件
1. 可视化创建及事件绑定 # 1 : 通过 Hierarchy 面板创建 UI > Button. 2 : 创建一个脚本 TestClick.cs, 定义了一个 Click 的 public ...
- UiAutomator编译与运行测试代码
编译与运行步骤 1.创建build文件.打开cmd命令窗口,进入工程路径cd E:\workspace\UiAutomatorDemo1,然后输入命令android create uitest-pro ...
- ERROR [org.apache.hadoop.util.Shell] - Failed to locate the winutils binary in the hadoop binary path
错误日志如下: -- ::, DEBUG [org.apache.hadoop.metrics2.lib.MutableMetricsFactory] - field org.apache.hadoo ...