HTML CSS样式基础
一、css
1.什么是css？
Cascading Style Sheet 级联样式表
改变样式的一个工具，说白了，就是为了让我们的页面好看，
HTML底层封装了css这样一个工具。
2.怎么使用css
a、style 风格、样式
这个关键词写到标签内部，可以修改标签的样式
注意：写在标签内部！也就是>里面
3.css样式，分为三种
a、行内样式表
<p style="color:#0FC">111111111111</p>
其中：style="color:#0FC"就是改变当前这个标签的样式。
b、内部样式表
选择器：告诉程序，我们要改变谁的样式。
id选择器：
1、在标签内加上id属性
2、在写之前，要加上#
<h1 id="www">望庐山瀑布</h1>
#www{
background-color:#0CF;
}
类选择器：
1、在标签内加上class属性
2、类选择器，写之前，要加上.
<p class="qqq">111111111111</p>
.qqq{
background-color:#0F9;
}
注意：以.开头
标签选择器：
<style type="text/css">//style关键词
p{//p标签，标签选择器，查找所有相对应的标签
color:#F33;//要改变的样式。
}
</style>
注意： 1、style里面要写上type属性，标识这是改变css
2、选择器后面要加上一对{} ，
3、每一句改变样式之后，要加上;
c、外部样式表
写在我们网页的外面
1、新建一个css
2、在css中写上相对应的样式
3、将css样式导入网页
a、<link href="1.css" rel="stylesheet" type="text/css" />
b、<style type="text/css"> @import url("css路径"); </style>
d、样式表的优先级
行内样式表>内部样式表>外部样式表
e、选择器的优先级
id选择器>类选择器>标签选择器
f、并集选择器
通过一个详细的描述或者说地址来查找某一个或者某一组相对应的标签
p,#id,.class{}
会改变所有p、id和class所覆盖的标签样式，中间用英文输入法的“,”号隔开
g、交集选择器
h3.cecond{}
会先查找h3标签，再查找所有h3标签里面的类名为second的标签修改属性
中间没有任何东西进行连接
h、后代选择器
table tr .qq{
background-color:#F00;
}
会根据所写的标签或者选择器，进行一层一层的查找，直到最后查找到所需要
的标签，中间用“ ”隔开
小结：
标签选择器是直接应用于所有的HTML标签
类选择器可以在页面中多次使用
id选择器在页面中只能使用1次
i、css属性
1、字体样式：
font-style： 设置字体风格
font-weight： 设置字体粗细
font-size： 设置字体尺寸
font-family： 设置字体系列
font： 把以上所有的设置全部设置在一个属性中
2、文本样式：
color： 设置字体颜色
line-height： 设置行高
text-align： 设置文本的对齐方式
text-decoration：设置文本的装修，例如：underline、none、line-through
3、背景属性：
background-color： 设置背景颜色
background-image: 设置背景图片
background-position：设置背景的位置
background-repeat： 设置背景的填充方式
background 设置背景，把以上所有的设置全部设置在一个属性中
4、列表属性：
list-style-image： 将列表设置为列表标识
list-style-type： 设置列表的标识类型，disc实心圆，circle空心圆，
square正方形
list-style： 把以上所有的设置全部设置在一个属性中
5、超链接的伪类
a:link{ 未访问的链接
color:#F00;
}
a:visited{ 已访问的链接
color:#6F6;
}
a:hover{ 鼠标悬浮改变样式
color:#FCC;
}
a:active{ 鼠标长按改变样式
}
6、cursor属性
url 设置自定义鼠标样式
default 默认光标
pointer 超链接的指针
wait 程序正在忙
help 指示可用的帮助
text 指示文本
crosshair 十字型
move 可移动指针
4、盒子模型
a、什么是盒子模型？
把相对应的元素放入到一个容器中，可以进行相对应的处理
移动或者处理这个盒子模型的同时，整个在盒子模型中的元素都会跟着
被处理。
边距：
内边距：
padding：top,left,right,bottom
外边距：
margin：top,left,right,bottom
b、浮动
什么是浮动？
其实原理就是align
浮动的属性：
left： 左浮动
right： 右浮动
none： 不浮动
clear属性： 清除浮动，both全部清除
c、overflow属性
当有元素溢出时，应如何处理
visible 默认的
auto 自动的
hidden 隐藏
scroll 加上滚动条
d、iframe标签
内联框架。
可以导入其他东西。
<iframe src="1.html" width="1366px" height="200" scrolling="no"
frameborder="0">
src：导入其他的页面路径
width：调整导入的页面的宽度，px是单位，可以不加，默认就是px
height：调整导入的页面的高度
scrolling：是否显示滚动条
frameborder：是否显示边框，1表示显示，0表示不显示
e、position属性
定位。
相对定位：
relative，相对他原来的位置，进行移动。
绝对定位：
absolute，
fixed
定位到网页的某个地方，一直不变。
static
偏移值的设定
X轴(left、right 属性)与Y轴（top、bottom属性）
可取值：像素或百分比
HTML CSS样式基础的更多相关文章
- CSS样式基础知识
CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...
- CSS样式基础：
CSS:外部文件导入 <link rel="stylesheet" type="text/css" href="./style.css&quo ...
- css样式基础详解
一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-styl ...
- CSS样式基础2
CSS: 一.常用样式:字体,颜色,背景 二.布局:浮动 定位 标签特性 三.标签盒子模型: 边距 边框 四.动画:旋转 渐变 注意:子标签会继承父标签的样式但不是所有的样式都会被继承. 1.1 ...
- CSS样式基础总结
首行缩进:text-indent:2em 行高:line-height:1.5em 1.5倍行距 也可以设置像素文字修饰:text-decoration:underline下划线 line-throu ...
- css样式基础三
css的定位: 其中css中被分为块级元素与行内元素.如块级元素div.hx标签.p元素.行内元素span和strong W3school给出的一切皆为框的定义. 而且可以使用display属性,强行 ...
- Css样式基础
1.Css的语法 CSS的语法主要由两个部分组成,一个是选择器,一个是属性. 选择器又分为以下几种: 1.元素选择器:即Html标签去掉括号的就是元素 2.类选择器:所谓的类就是说class=“名称” ...
- CSS样式基础二
一.列表 主要分为有序列表ol,无序列表ul <ul> <li></li> ... </ul> <ol> <li></li ...
- Emmet快速编写CSS样式
基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...
随机推荐
- 暴力+降复杂度 BestCoder Round #39 1002 Mutiple
题目传送门 /* 设一个b[]来保存每一个a[]的质因数的id,从后往前每一次更新质因数的id, 若没有,默认加0,nlogn复杂度: 我用暴力竟然水过去了:) */ #include <cst ...
- Matlab之文件操作
1.判断是否存在文件夹:if (exist(folderName,'dir')) 2.创建文件夹:mkdir(folderName) 3.删除文件夹:rmdir(folderName,'s') 4.当 ...
- linux netstat命令使用详解
快速应用 netstat -lnp | more 显示监听的端口 简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),mas ...
- Xcode插件筛选
Xcode高效插件推荐 好像很多iOS开发的同学都不知道Xcode有插件这么一说,所以整理了一下自己用的Xcode高效插件,分享给大家 下列插件在Xcode 7.0.1 版本做测试通过可以使用 在Xc ...
- iOS UIWebView 之 UIProgressView
之前做等待跳转都是用UIActivityIndicatorView ,后来做webView 加载页面的时候,发现了一个特别好用又超级炫酷的加载提示NJKWebViewProgress,作者巧妙的通过计 ...
- Innotop简单介绍
Innotop介绍 Innotop是一款Perl脚本编写.开源.功能强大的MySQ的监控工具,它通过文本模式(命令行模式)监控,功能强大,配置简单,易于使用等等特性.Innotop这个项目位于ht ...
- Go 定时任务
本文基于Golang Crontab 实现了一个Crontab Job Manager.更加容易使用,同时也能够满足更加复杂的场景. 仓储地址, 如果有用,欢迎点赞,欢迎讨论,欢迎找茬. 需求 在开发 ...
- Django is not importable in this environment
1.由于把venv给忽略了,所以显示找不到django. 2.在.gitignore中加入了 venv\会导致,在此git目录下,用pycharm 创建的项目会自动在 file types中的地方加 ...
- （转）Memcached深度分析
转自:http://jwen.iteye.com/blog/1123991 memcached是高性能的分布式内存缓存服务器.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态W ...
- 绘制pathway富集散点图
本文转载自http://www.omicshare.com/forum/forum.php?mod=viewthread&tid=146&extra=page%3D1%26filter ...