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样式表基础的更多相关文章

  1. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  2. CSS样式表基础知识、样式表的分类及选择器

    一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...

  3. css 样式表 基础 样式

    1大小 width  宽度 height 高度 2 背景 background-color 背景色 background-image:url(图片位置) 背景图片 background-repeat: ...

  4. HTML基础(三)——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  5. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  6. html基础 CSS样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  7. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  8. CSS样式表初学,比C#和JS简单

    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...

  9. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

随机推荐

  1. py-faster-rcnn之从solver文件创建solver对象,建立pythonlayer

    faster-rcnn在训练阶段,根据一个solver的prototxt文件创建相应的网络.仅凭一个prototxt就创建网络?其实还涉及到自定义的PythonLayer. 比如lib/rpn/anc ...

  2. 内存VSS/RSS/PSS/USS名词解释

    VSS(virtual set size)虚拟耗用内存(包含共享库占用的内存) RSS(Resident set size)实际使用物理内存(包含共享库占用的内存) RSS是进程实际驻存在物理内存的部 ...

  3. Android File存储

    原创文章,转载请注明出处:http://www.cnblogs.com/baipengzhan/p/Android_File_store.html 一 概念 Android系统中提供了一种文件读写的方 ...

  4. 仿window系统自带的日期差计算器类

    public class MonthSubstract { /// <summary> /// 日期差之月份 /// </summary> public int Months ...

  5. Linux下安装 MySQL

    Ubuntu环境 使用二进制安装包安装,相对简单绿色 1.到官网下载二进制压缩包http://dev.mysql.com/downloads/mysql/ 2.选择需要的版本 目前最新为5.7.之后选 ...

  6. 第五章 --- 关于Javascript 设计模式 之 发布-订阅模式

    先来个最简单的 发布订阅模式 document.body.addEventListener('click',function(){ alert(123); }); document.body.clic ...

  7. linux大文件分割 split命令

    inux split 命令 功能说明:切割文件. 语 法:split [--help][--version][-][-b ][-C ][-l ][要切割的文件][输出文件名] 补充说明:split可将 ...

  8. github免密码设置

    在创建好了github账号之后,我们可以新建自己的github项目.然而,我们在本地代码升级维护的过程中,涉及到git操作的时候并不是想每次都重新输入密码.这个时候我们需要使用ssh和私钥(公钥)来方 ...

  9. prototype,__proto__,constructor

    proto属性: 所有对象都有此属性.但它不是规范里定义的属性,并不是所有JavaScript运行环境都支持.它指向对象的原型,也就是你说的继承链里的原型.通过Object.getPrototypeO ...

  10. DataGrid控件使用

    应用Binding显示后台数据 <UserControl x:Class="demo03.View.UserInfoList"             xmlns=" ...