css样式表分类、选择器分类、css基础样式
- 内容与表现分离
- 网页的表现统一,容易修改
- 丰富的样式,使网页布局更加灵活
- 减少网页代码量,增加网页的浏览速度,节省网络带宽
- 使用独立于网页的CSS,有利于网页被搜索引擎收录
- 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签
- style="" 行内样式表
- <style> 内部样式表
- <link rel="stylesheet" href="" /> 外部样式表 (使用最多)
- <style>@import ""</style> 导入方式,尽量不要使用!!!
- <link/>标签属于XHTML,@import属于CSS2.1;
- 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示;
- 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页中;
- @import是CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的;
background背景
1.background-color 背景色 (16进制数 rgb rgba 英文名)
2.background-image 背景图
3.background-size 背景大小 (像素、百分比)
4.background-repeat (repeat-x repeat-y no-repeat)
5.background-position (通过方向值来指定,通过百分比指定,通过确切的像素值指定)
6.background-attachment 是否随着浏览器滚动,使用它图片会相对浏览器固定住(bg-position和bg-attachment不要一起使用)
7.background复合属性 可以把之前的属性定义在这一个里面,【一般书写顺序:颜色、图片、是否重复、是否固定、位置】
color颜色
- color 规定文本的颜色
- opacity 设置元素的透明度 ,1不透明 0完全透明
font字体
- font-style 指定文本的字体样式(正常、斜体)
- font-variant 指定文本是否为小型的大写字母(对英文起作用)
- font-weight 指定文字的粗细(只有两种样式) bold 粗体
- font-size 指定文本字体大小
- font-family 定义文本使用某个字体
中文字体font-family常用列表http://www.cnblogs.com/jihua/p/cnfont.html
font 复合属性
一般顺序:字体样式、是否为小号大写字、字体粗细、字号、字体
text文本属性
color , text-align , line-height , letter-spacing , vertical-align ,text-indent ,text-decoration ;
-----【vertical-align----->1. 常用于文本框input ,2. 结合{display:table-cell;}可用于将图片垂直居中 】
-----【valign----->只适用于table中的单元格,例如<td valign='top' height='100px'>this is cell</td> 】
-----【align----->适用于<hr/>,例如:<hr align="right" width="200" size="20" color="pink"/> ;
<table>,例如:<table border="1" width="300" align="center">······</table> ;
<img/>,例如:<img src="ika.jpg" align="top" alt=""/> <span>文本相对于图片顶部显示 </span> ;
·····等等,不再一一列举;】
css样式表分类、选择器分类、css基础样式的更多相关文章
- css样式表的选择器与分类
css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...
- CSS篇-样式表、选择器、权重、伪类
CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法 选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div sty ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- CSS样式----css样式表和选择器(图文详解)
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- css 03-CSS样式表和选择器
03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- CSS:CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- css样式表和选择器的优先级以及position元素属性值的区别
css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
- 关于CSS各种选择器,还有各种引入样式表的区别,import导入样式表,在介绍一些伪类选择器
(一)CSS选择器: 1.标签选择器:通过HTML的标签名直接选择该标签 2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中 3.ID选择器:通过#选择器的名称{} 来对添加 ...
- CSS样式表及选择器相关内容(二)-伪类与伪元素选择器
伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: ...
随机推荐
- Java---类加载机制,构造方法,静态变量,(静态)代码块,父类,变量加载顺序
直接上代码: 代码1: public class ConstroctTest { private static ConstroctTest test = new ConstroctTest(); // ...
- PHP判断远程文件是否存在
<?php /* 函数:remote_file_exists 功能:判断远程文件是否存在 参数: $url_file -远程文件URL 返回:存在返回true,不存在或者其他原因返回false ...
- Java总结篇系列:Java多线程(一)
多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的. 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程 ...
- 记录一下git 的常用命令
以后如果要写一个东西,最好先搭建一个本地仓库,用版本控制对其进行操作,可能一开始有一些麻烦,但是很有可能会受益无穷. 说到git,必然会和github联系起来. 不管是在ubuntu里面还是在Wind ...
- python的os模块
1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd() 2.返回指定目录下的所有文件和目录名:os.listdir() 3.函数用来删除一个文件:os.remove() ...
- 【转】Java读取matlab的.mat数据文件
参考:Java读取mat文件 下载链接:ujmp jmatio 下载完两个.jar文件之后,如何引用到java项目当中?项目名称->右键->Property->Java Build ...
- EL表达式获取数据的方式
<%@page import="cn.jiemoxiaodi.domain.Person"%> <%@ page language="java" ...
- Qt:正则表达式语法:
正则表达式是验证输入.从输入中提取数据以及对输入进行搜索和替换的强大工具,所谓正则表达式,regexp是一种利用模式匹配语言来描述字符串组成限制条件的方式; Qt 提供了一个Q ...
- python第14天
Python之前端web: HTML CSS 一. 什么是HTML: html为超文本语言,使用标签来描述网页. html标签格式: HTML 标签是由尖括号包围的关键词,比如 <html> ...
- tp5 中 model 的更新方法
// 过滤非数据表字段更新 public function update(Request $request){ $user = model('User'); $result = $user -> ...