CSS简单介绍及应用
CSS的简介
概述: Cascading Style Sheets, 层叠样式表. 作用:
用来美化页面的. 分类:
行内样式: //直接写在元素(html的标签)中的样式. 内部样式: //写在<head>标签的,<style>标签中. 外部样式: //写在后缀名为.css的文件中. CSS的引入方式之: 行内样式.
格式:
<div style="属性名:属性值; 属性名:属性值"></div> 作用: 只针对于当前元素有效. CSS的引入方式之: 内部样式.
格式: //写在<head>标签的,<style>标签中.
选择器{
属性名:属性值;
属性名:属性值;
}
作用: 针对于当前页面内的部分元素有效. CSS的引入方式之: 外部样式.
格式: //后缀名为.css的文件中
选择器{
属性名:属性值;
属性名:属性值;
}
作用: 可以用来统一整个网站的风格. CSS中的选择器:
元素选择器:
格式:
元素名{
属性名: 属性值;
属性名: 属性值;
}
作用: 针对于该类元素有效. id选择器:
格式:
#选择器名{
属性名: 属性值;
属性名: 属性值;
} 作用: 给指定id(id名和选择器名一样的元素)设置样式的.
//记忆: 每个标签都有id属性, id属性尽量保证唯一. 类选择器:
格式:
.选择器名{
属性名: 属性值;
属性名: 属性值;
}
作用: 用来设置某类元素(class属性的值为 选择器名的元素)的样式的. 后代选择器:
(元素,id,类)选择器 元素名{
//样式
}
作用: 设置指定的元素内的 指定的"子标签"的样式的. 伪类选择器:
a:link{} //未选中连接
a:active{} //选定的链接
a:visited{} //已访问的链接
a:hover{} //鼠标移动到链接上 作用: 主要用来操作超链接的. CSS的样式
背景:
background-color: 设置背景色
字体:
font-size: 设置字体大小
文本:
text-decoration:将其值设置为:none,可以取消超链接字体的下划线.
color: 设置字体的颜色
边框:
border: 1px solid blue; //1像素, 蓝色实线
//solid: 单实线, double:双实线 dotted:(点)虚线 dashed:(-)虚线
width: 设置标签的宽度
height: 设置标签的高度 CSS的浮动
概述: 通常情况下页面的布局: 从上往下逐行分布. 有些时候我们需要页面中的布局方式是从左往右, 或者从右往左之类的自定义页面布局, 就需要用到: 窗体浮动.
float: //设置浮动.
属性值: left, right
clear: //清除浮动.
属性值: both CSS的盒子模型
概述: 也是用于布局的. 正常的一个页面可能有多个div, 每个div的里边可能有其他元素(元素和div之间的间距叫内边距), div与div之间有可能也是有间隙的(外边距).
外边距: margin
内边距: padding margin: 值1 值2 值3 值4; //离上,右,下,左的间距分别是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右); //离上,右,下,左的间距分别是: 值1 值2 值1 值2;
margin: 值1; //离上,右,下,左的间距分别是: 值1 值1 值1 值1;
CSS简单介绍及应用的更多相关文章
- css简单介绍
css层叠样式表,主要作用就是解决内容与表现分离的问题.html标签有自己的意义当然也是有自己的默认样式的,但有时候我们想修改他的样式,这时候就需要了css. 例:给字体加上颜色,我们有如下几种方法: ...
- WeX5的简单介绍及UI的简单讲解
WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...
- HTML简单介绍及举例
超文本标记语言(Hyper Text Markup Language,简称HTML)是为"网页创建和其他可在网页浏览器中看到的信息"设计的一种标记语言.HTML被用来结构化信息,也 ...
- css简单了解
今天主要是说一下css样式表!HTML结合他使用可以是HTML页面变得很绚丽多彩! 先简单介绍一下为什么要使用CSS(Cascading Style Sheets)层叠样式表! 1．因为CSS样式表可 ...
- webpack入门篇--1.简单介绍
简单介绍: webpack是一个模块打包工具,给js准备的打包工具,可以把很多的模块打包成很少的文件 目标: 1.切分依赖数,分到不同代码块里,按需加载,懒加 载 2.任何静态资源都可以被视为一个模块 ...
- Eclipse rap 富客户端开发总结(1) ：rap简单介绍和开发环境搭建
一.rap简单介绍 1 基本概念 RAP可以让开发人员使用JAVA API和按照Eclipse 插件的开发模式构建基于AJAX的Web 2.0应用程序, RAP的工作原理是采用交叉编译的方式将 ...
- Fiddler使用简单介绍
一,fiddler简介 1.1,什么是fiddler Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出&qu ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- 浏览器中 F12 功能的简单介绍
chrome浏览器中 F12 功能的简单介绍 由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首 ...
随机推荐
- Kotlin Android Extensions (译文)
原文链接: http://kotlinlang.org/docs/tutorials/android-plugin.html Kotlin Android Extensions 本教程介绍如何使用Ko ...
- OpenCV获取RTSP解码播放
#include <opencv2/opencv.hpp> int main(int argc, char **argv){ IplImage *pFrame = NULL, *srcIm ...
- makefile 学习归纳
makefile 学习归纳 一直希望 好好整理下 makefile的写法,这在linux编程界是必备技能.下面就好好的说道说道. 可以参考的大神总结 整理 makefile是供make命令执行的 脚本 ...
- 安装PL/SQL客户端来访问操作步骤
1 2 3.改变路径 4 5 6 7 8 9.选择注册机 10
- BZOJ5337 [TJOI2018]str
题意 小豆参加了生物实验室.在实验室里,他主要研究蛋臼质.他现在研究的蛋臼质是由k个氨基酸按一定顺序构成的.每一个氨基酸都可能有a种碱基序 列si_j 构成.现在小豆有一个碱基串s,小豆想知道在这个碱 ...
- xlrd,xlwt读表格、写表格
转:http://www.jb51.net/article/60510.htm
- JUnit测试，获取Spring MVC环境
@RunWith(SpringJUnit4ClassRunner.class) @WebAppConfiguration @ContextConfiguration(locations = { &qu ...
- bzoj 4310 跳蚤——后缀数组+二分答案+贪心
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4310 答案有单调性? 二分出来一个子串,判断的时候需要满足那些字典序比它大的子串都不出现! ...
- CF 504E Misha and LCP on Tree——后缀数组+树链剖分
题目:http://codeforces.com/contest/504/problem/E 树链剖分,把重链都接起来,且把每条重链的另一种方向的也都接上,在这个 2*n 的序列上跑后缀数组. 对于询 ...
- Java基础知识复习（二）
Java 重写(Override)与重载(Overload) 重写 是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变,属于编译时多态.即外壳不变,核心重写! 重写的好处在于子 ...