CSS样式表基础
CSS的样式表其实就是美观页面的,加一些样式。
一、样式表的三种分类:
①内联样式:写在某一个标签里面的样式。
优点:控制精确。
缺点:代码重用性差。(太多了不好写)
页面代码乱。(太乱,后期不方便看)
优先级最高!!
②内嵌样式:嵌在某一个页面里的。(是写在<head>里面,专门用来写样式)
需要添加一个标签:
<style lype="lexl/css"></style>
优点:代码重用性好。(一起找到很多元素,统一加上一个样式,写一遍可以)
缺点:控制不精确
优先级其次!!
③外部样式表。
优点:代码重用性最好。(可以对所有页面的标签实现统一样式)
缺点:控制最不精确。
优先级和内嵌一样!!
如果写的代码很多的情况下,建议使用外部样式表。
二、选择器
1、标签选择器
A:*(所有元素){color(所加样式)="颜色"}【优先级最低】
B:# id选择器(准确的找到一个元素)【优先级最高】
例:在<boby>里面的<div>属性里标注id="",再去上面标注出来进行更改样式。
#+id的名字{设置样式color="颜色"}
C:. class选择器 (一句话统一多个元素。)【优先级一般】
例:多个<div class="命名1">属性中统一class名。再去上面标注出来进行更改样式。
D:<span>或<div>标签选择器 【优先级一般】
例:span{color(所加样式)="颜色"}
标签选择器>*(所有)
class选择器>标签选择器
id选择器>class
越精确的优先级越高。
2、复合选择器
①逗号:代表并列的关系
例:让div和span全部加上样式。
div,span{
font-size: 50px;
}
②空格(代表后代关系)
③点筛选
在选择器里面代表class.
但这里点代表筛选。
筛选点.只适用于class的情况下才能筛选。慎用!
CSS样式表基础的更多相关文章
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- CSS样式表基础知识、样式表的分类及选择器
一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...
- css 样式表 基础 样式
1大小 width 宽度 height 高度 2 背景 background-color 背景色 background-image:url(图片位置) 背景图片 background-repeat: ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- html基础 CSS样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- CSS样式表初学,比C#和JS简单
今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...
- CSS样式----CSS样式表的继承性和层叠性(图文详解)
本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
随机推荐
- 【poj3744】 Scout YYF I
http://poj.org/problem?id=3744 (题目链接) 题意 给出n个雷,分别在 a[1]...a[n] ,走一步概率为 p ,走两步概率为 1-p ,一开始在 1 号位置,问安全 ...
- Linux哲学思想--基本法则
1.一切皆文件: 2.单一目的的小程序: 3.组合小程序完成复杂任务: 4.文本文件保存配置信息: 5.尽量避免捕获用户接口: 6.提供机制,而非策略. 自从Linux一诞生就注定了其成为经典的命运. ...
- POJ2096 Collecting Bugs
Time Limit: 10000MS Memory Limit: 64000K Total Submissions: 5090 Accepted: 2529 Case Time Limit: ...
- ZKW线段树
简介 zkw线段树虽然是线段树的另一种写法,但是本质上已经和普通的递归版线段树不一样了,是一种介于树状数组和线段树中间的存在,一些功能上的实现比树状数组多,而且比线段树好写且常数小. 普通线段树采用从 ...
- Windows bat脚本学习(1)
基础 首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 ...
- ThinkPHP框架之验证码
Think\Verify类可以支持验证码的生成和验证功能. 下面是最简单的方式生成验证码: $Verify = new \Think\Verify(); $Verify->entry(); 上面 ...
- 轮播插件unsilder 源码解析(一)---源码解析
jq扩展内容 $.fn.unslider = function(opts) { return this.each(function(index,elem) { var $this = $(elem); ...
- jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别
$(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ // 在这里写你的代码 ...
- mysql-开启慢查询&所有操作记录日志
在运营网站的过程中,可能会遇到网站突然变慢的问题,一般情况下和 MySQL 慢有关系,可以通过开启慢查询,找到影响效率的 SQL ,然后采取相应的措施.下面介绍一下如何开启慢查询: 1.开启慢查询 找 ...
- MySQL性能优化:索引
MySQL性能优化:索引 索引提供指向存储在表的指定列中的数据值的指针,然后根据您指定的排序顺序对这些指针排序.数据库使用索引以找到特定值,然后顺指针找到包含该值的行.这样可以使对应于表的SQL语句执 ...