一、分类

①内联,写在标签中,写法是style="样式属性"。优先级最高。

优点:控制精确。缺点:代码重用性差,范围小。

例如:

<div style="font-size=12px;"></div>

  

②内嵌,在<head></head>中书写。

优点:代码重用性好,范围大。缺点:控制性差,不精确。优先级最差。

注释方法:/*注释内容*/

例如:

<style type="text/css" >
/*这是要被注释内容*/
</style>

③外部,在<head></head>中书写。

优点:代码重用性最好,范围最大。缺点:控制性差。优先级中。

使用<link />标签引用外部css。

例如:

<head>
<link src="Untitled.css" />
</head>

二、选择器

①元素命名,id、class

*号是指所有。

*{}对所有元素增加样式。

②获取id

#id{}选择id名称是“id”的元素,id具有唯一性。

③获取class

.class{}获取class名称是“class”的元素,class可以命名多个元素。

④标签选择器

格式为:标签名{}

,并列

空格后代

.点筛选

例如:

<head>
<style type="text/css">
div{}/*标签选择器*/
#a{}/*id选择器*/
.b{}/*类级选择器*/
div #a{}/*空格后代,div标签下的span标签*/
div, font{}/*逗号并列,div和font标签*/
</style>
</head> <body>
<div>
<span id="a">
</span>
</div>
<font class="b">
</font>
</body>

  

  

CSS样式学习-1的更多相关文章

  1. 11种常用css样式学习大结局滚动条与显示隐藏

    滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...

  2. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  3. Boostrap入门级css样式学习

    1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...

  4. 2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)

    CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link: ...

  5. css样式学习笔记

    视频参见php中文网玉女心经视频教程 讲解的相当的清楚和明白 第1章     :css快速入门 1.1     什么是css 改变html框架的样式. 1.2     css的三种引入形式 第一种形式 ...

  6. html之CSS样式学习笔记

    本文内容: 字体样式 文本样式 背景样式 尺寸样式 盒子模型 边框样式 边距样式 浮动布局 定位布局 [CSS3]伸缩布局 标签显示方式 列表样式 [CSS3]过渡样式 [CSS3]变换样式之2D变形 ...

  7. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  8. css样式学习小知识

    1. 使用百分比设置宽高 自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. inp ...

  9. bootstrap 学习 ---css样式学习

    bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...

随机推荐

  1. windows下python2和python3同时安装ipython

    1.ipython简介: IPython 是一个 python 的交互式 shell,比默认的python shell 好用得多,支持变量自动补全,自动缩进,支持 bash shell 命令,内置了许 ...

  2. PAT 乙级 1014 福尔摩斯的约会 (20) C++版

    1014. 福尔摩斯的约会 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大侦探福尔摩斯接到一张奇怪的 ...

  3. hive中的表

    一.内部表与外部表的比较 Hive表概念和关系型数据库表概念差不多.在Hive里表会和HDFS的一个目录相对应,这个目录会存放表的数据.目录默认是/usr/hive/warehouse/. 比如你在h ...

  4. tomcat中class和jar的加载顺序(转)

    https://blog.csdn.net/lipei1220/article/details/53924799 加载顺序: 1. $java_home/lib 目录下的java核心api 2. $j ...

  5. go语言笔记——切片函数常见操作,增删改查和搜索、排序

    7.6.6 搜索及排序切片和数组 标准库提供了 sort 包来实现常见的搜索和排序操作.您可以使用 sort 包中的函数 func Ints(a []int) 来实现对 int 类型的切片排序.例如  ...

  6. 关于解决logging模块写出的日志信息重复的问题

    一般情况下,我们在利用logging模块记录日志的时候,往往会利用下面这种方式进行日志信息的记录: import logging def logger_file(): #生成logger对象 whw_ ...

  7. ZooKeeper系列(9):ZooKeeper实现分布式Barrier和Queue

    1. 快速开始 1.1概述: Zookeeper是Hadoop的一个子项目,它是分布式系统中的协调系统,可提供的服务主要有:配置服务.名字服务.分布式同步.组服务等. 1.2 使用常见 1.2.1 统 ...

  8. (转)Floyd算法

    原文地址:http://www.cnblogs.com/twjcnblog/archive/2011/09/07/2170306.html 参考资料:http://developer.51cto.co ...

  9. synergy一个鼠标键盘控制多台电脑

    有些时候我们同时操作多台电脑,但是我们只用一个鼠标和一个键盘,如果通过转换器啊或者是多个鼠标键盘就非常不方便了 下面我介绍一下通过安装synergy这个软件来给开发人员提供方便 这个软件安装比较简单, ...

  10. css实战——第一天

    1.  开发前的准备 1.1配置开发环境   sublime  webstorm  vscode  Hbuilder  atom 1.2建立项目文件夹 主页或是首页    index.html   d ...