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标签与属性值的首字母就可以,比如: ...
随机推荐
- WireShark过滤语法
1.过 滤IP,如来源IP或者目标IP等于某个IP 例子:ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107或者ip.addr eq 192.168. ...
- Android学习----Activity
一.什么是activity Activity 是用户接口程序,原则上它会提供给用户一个交互式的接口功能.它是 android 应用程序的基本功能单元.Activity 本身是没有界面的.所以activ ...
- linux 配置 sphinx 全文搜索引擎
因为公司网站需要,最近在弄sphinx搜索引擎,也是遇到各种问题,最终终于解决了. 服务器系统:centos7 (64位) 详情看安装官网的安装教程进行 coreseek 3.2.14 这里只提一些注 ...
- php中const定义常量
const 常量 1.在定义时必须被初始值,2.前面不加任何修饰符3.变量名字母一般都大写4.常量可以被子类继承5.一个常量是属于一个类的,而不是某个对象的 作用:当某些值是固定不变的,就用const ...
- JQuery调用iframe父页面元素与方法
JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...
- UML问题
1.在创建协作图时需要先确定参与者,而协作图的工具栏里是没有Actor的,这是需要先new Actor,然后把其拖动到工作区:实验过程中发现必须创建在用例视图下,若是创建在逻辑试图下那么根本无法继续操 ...
- Facebook 开源 AI 所使用的硬件平台 'Big Sur'
Facebook 开源 AI 所使用的硬件平台 'Big Sur' Facebook 今开源其 AI 所使用的硬件平台 'Big Sur'.'Big Sur' 是兼容开放机架的 GPU 加速硬件平台. ...
- Bit,Bytes,KB,MB,GB,TB,PB,EB,ZB,YB
Bit,Bytes,KB,MB,GB,TB,PB,EB,ZB,YB 汉字字符 2字节英文字符 1字节中文标点 2字节英文标点 1字节一个字节就是一个八位二进制数啊,2就是00000010,4就是000 ...
- sql语句:union
sql语句中,join,left join中,是将两个或多个表横向连接,而有时,我们需要将几个表或1个表纵向连接,甚至是连接自身,就比如,某些数据库脚本特别不合理的时候,但我们又不能说啥 ....郁 ...
- 【性能测试】【Jmeter】学习(1)
2013/8/6开始阅读Jmeter文档 2013/8/7总结 监听器——CSV Data Set Config 在Jmeter中添加一个CSV配置原件 CSV配置原件添加方法:(右键点击某一个操作步 ...