【css】选择器+盒子模型
来源:互联网 发布:淘宝客服任职要求 编辑:程序博客网 时间:2024/06/05 03:14
做牛腩的时候曾接触过css,有一篇博客总结如下:【牛腩】HTML+CSS基础了解
【如何引入css】
曾写了一篇文章:【JavaScript】什么是JavaScript?提到如何把JavaScript代码引入html代码中的几种方式。类似的,css代码引入html中也有那么几种方式。下面一一列举:
1、通过html提供的一个标签<style></style>
直接把css代码写入html代码页面。
<style type="text/css"> .class1{ border:1px; }<style>
此种方式的css代码只能在本页面中使用,复用性比较低。
2、通过html提供的一个标签<style></style>
引入外部css文件到html代码页。
<style type="text/css"> @import url("css文件的路径");</style>
3、通过html提供的一个标签<link></link>
的 href
属性来把外部css文档引入html代码页。
<link href="css文件的路径" rel="stylesheet"></link>
推荐使用这种方式,可用性高。为啥不推荐使用上一种引入方式就看看下面的对比。第三种link引入与第二种@import引入的区别:
4、直接在html的各种标签中使用style
属性。
<a style="color:#0F0;">一条新闻题目</a>
只能适用于本标签,复用性低,不推荐使用。
【选择器】
css是用来对html的内容进行样式设置的,html页面是由一对对的标签以及实际要展示的内容来组成。
那么要如何对html中的特定内容实现特定的样式效果呢?就是通过html页面中众多的标签来控制的。标签对特定内容做标记,用来控制对特定的页面内容实现特定的效果。
css获取html中特定文本的标签以及标签的属性、属性值。加上样式设置。就这么实现了。
那么获取标签以及标签的属性、属性值的过程是通过选择器来实现的。
选择器分为这么几类:
基础的选择器:
1、标签选择器:找到所有指定的标签进行样式化。
div{ color:#0f0;}
2、类选择器:使用类选择器首先要给html标签指定对应的class属性值。
.class的属性值{ color:#0f0;}
3、id选择器:使用id选择器首先要给html标签添加一个id属性值。
#id的属性值{ color:#0f0;}
优先级比较:
ID选择器>类选择器>标签选择器
注意:类选择器和id选择器的属性值都不能以数字开头,否则无效。
配合使用的选择器:
1、交集选择器:
对指定的选择器的公共部分
选择器1选择器2…{ 样式1,样式2,……}
2、并集选择器:
对指定的选择器进行统一的格式化。
选择器1,选择器2…{ 样式1;样式2;……}
3、通过选择器:
可以匹配任何元素
*{ 样式1;样式2;……}
4、伪类选择器:
针对元素处于某一状态
a:link{color:#FF0000}/*未访问的链接*/a:visited{color:#00ff00}/*已访问的链接*/a:hover{color:#ff00ff}/*鼠标移动到链接上*/a:active{color:#0000ff}/*选定的链接*/
关于选择器,更详细的可以参考:有关 css选择器的基础知识、CSS3 选择器——伪类选择器
【盒子模型】
css中最最核心的部分就是盒子模型了。html页面内容无非就是文本、图片、图形。样式的设置无非就是设置颜色、大小、位置、形状。而盒子模型就是设置位置的一个关键点。
盒子模型长这个样子
Margin:外边距,一个盒子边框和另一个盒子边框的距离。Border:边框Padding:内边距,一个盒子边框和它的内容的距离。正中间的是内容content。
定位也是用来设置html元素位置的。
定位分为三种:
1、相对定位:相对于元素原本的位置进行移动的。使用方式:position:relative;2、绝对定位:相对于整个页面而言固定不变。使用方式:position:absolute;3、固定定位:相对于浏览器而言固定不变。使用方式:position:fixed;
定位与盒子模型配合使用以控制html元素的位置。
0 0
- 【css】选择器+盒子模型
- CSS的选择器 和 盒子模型
- CSS盒子模型和部分选择器
- css选择器、css继承关系、css盒子模型
- CSS 北京属性 尺寸属性 盒子模型 定位 选择器
- 【CSS】CSS详细介绍:(HTML/CSS结合方式、CSS代码格式、选择器、盒子模型)
- 理解CSS盒子模型
- 盒子模型 css
- css盒子模型
- CSS盒子模型
- CSS核心--盒子模型
- CSS核心--盒子模型
- CSS盒子模型
- CSS盒子模型
- DIV+CSS盒子模型
- CSS盒子模型
- css盒子模型
- CSS盒子模型介绍
- C++走向远洋——58(项目二3、动物这样叫、改进版)
- scala学习之scala与java的一些区别(二)
- iOS离屏渲染优化
- SpringMvc系列之SpringMvc常用请求映射器实例
- 面向对象
- 【css】选择器+盒子模型
- Linux驱动开发、22-USB子系统
- C++11多线程之std::thread
- U盘修复的一点小实践
- java枚举:初学(2)
- android 图片压缩
- pojFinancial Management1004
- 个性化推荐算法:GRM,CF,NBI的实现
- maven 详解