【前端】CSS基础
3种html中设置css的方法：
- head中style标签
- head中link标签rel属性、href后跟css文件目录
- 在需要使用css样式的标签添加style属性
1.CSS选择器
- #id值
- .class值
1、id选择器
2、class选择器
3、标签选择器
4、层级选择器（空格）
5、组合选择器（逗号）
6、属性选择器（中括号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id选择器 --> */
#i1{
height: 48px;
background-color: red;
}
/* class选择器 最常用 */
.div{
height: 48px;
background-color: aqua;
}
/* 标签选择器 所有标签都适用 */
span{
color: red;
background-color: blue;
}
/* 层级选择器 组合选择器 span标签下面所有div标签颜色改变 层级通过空格区分*/
span div{
color: aqua;
background-color: red;
}
/* class层级选择器 c1下面的div标签适用 层级通过空格区分*/
.c1 div{
background-color: #336699;
height: 48px;
}
/* id层级选择器 i2下面的div标签适用 层级通过空格*/
#i2 div{
background-color: black;
height: 48px;
}
/* 组合选择器 id z1 z2 z3 共用一套css样式 组合之间用逗号分隔*/
#z1,#z2,#z3{
background-color: chocolate;
height: 48px;
}
/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
}
/* 属性选择器 对选择到的标签,在通过属性进行筛选 可以和层级选择器连用*/
div[s='dsx']{
background-color: darkred;
height: 48px;
}
</style>
</head>
<body>
<!-- css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class-->
<div style="height: 48px;background-color: #6699CC"></div>
<div style="height: 48px;background-color: #6699CC"></div>
<div style="height: 48px;background-color: #6699CC"></div>
<!-- css class引用-->
<div id="i1"></div>
<div class="div"></div>
<div class="div"></div>
<!-- 全局标签选择器 -->
<span>标签选择器</span>
<!-- 层级选择器 组合标签选择器 -->
<span>
<div>组合标签选择器</div>
</span>
<!--层级选择器 class选择器下的div标签 -->
<div class="c1">
<div></div>
</div>
<!--层级选择器 id选择器下的div标签-->
<div id="i2">
<div></div>
</div>
<!-- id组合选择器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>
<!-- class组合选择器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<!-- 属性选择器 -->
<div s="dsx"></div>
<div name="nn"></div>
</body>
</html>
2.CSS优先级
- 由内到外 由近到远
标签中style优先级最高，其次在代码中就近找，也就是从下往上找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <!--第三种引入css样式表-->
<link rel="stylesheet" href="s.css"> <!--head中style是第一处写css样式的地方-->
<style>
.c1{
background-color: red;
}
</style>
</head>
<body>
<!--第二种通过属性的方式对标签增加css样式-->
<div class="c1" style="background-color: black">1</div>
<!--优先级-->
<!--由内而外 由近到远--> </body>
</html>
优先级如下
3.常见属性
- 边框设置 如border
- 文字大小、粗细、浮动等
- display display:inline把块级标签变为行内标签；display:inline-block既是行内，又是块。不会让div沾满整行。同时还会对整个矩形实现样式；display:block行内转换为块
- 外边距、内边距 margin-top外边距；padding-top内边距
- 鼠标
- 图片 overflow、background-repeat（no-repeat不重复堆叠显示;repeat-x横向堆叠;repeat-y纵向堆叠）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<!--font-size 大小 font-weight 粗细-->
<div style="font-size: xx-large;font-weight: bolder">金牛座</div> <!--浮动-->
<div class="f1" style="background-color: black">没有float</div>
<div class="f1" style="background-color: green;float: right">float元素的浮动</div> <!--宽度可以使用百分比的方式 高度 不可以 写百分比-->
<div style="width: 30%;height: 48px;background-color:red"></div> <!--display 可以让标签在行内 和 块级之间 自由转换
块转行内display: inline 显示为内联元素，元素前后没有换行符;
行内转块display: block 显示为块级元素，此元素前后会带有换行符;
即是块 又是 行内display:inline-block;
-->
<div style="display: inline;">金牛座inline</div>
<span style="display: block;">金牛座block</span> <!--行内标签不可以应用 宽、高 外边距 内边距的样式-->
<span style="width: 100px;height: 100px">123</span>
<span style="background-color: red;display:inline-block;width: 100px;height: 100px;">456</span>
<div style="display:none;border:1px red solid;width:100px;height: 100px;">789</div> <!--外边距
不改变自身，针对外侧进行像素移动 margin、margin-bottom、margin-left、margin-right、margin-top
-->
<div style="width: 100%;height: 100px;border: 1px red solid">
<div style="margin-top:30px;width: 100%;height: 48px;background-color: blue"></div>
</div> <!--内边距
改变自身 padding、padding-bottom、padding-left、padding-right、padding-top
-->
<div style="width: 100%;height: 100px;border: 1px red solid">
<div style="padding-top:30px;width: 100%;height: 48px;background-color: blue"></div>
</div> <!-- cursor 光标样式 -->
<input type="button" value="登录" style="cursor: pointer"> <!--overflow滚动条
overflow: hidden 当图片或内容大于外层div时，自动 截取左上角图片
overflow: auto 当内容或图片小于外层div则自动隐藏滚动条
overflow: scroll 无论大小 都在增加滚动条
--> <div style="overflow: scroll;border: 1px black solid;width: 200px;height: 200px">
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
</div>
<div style="overflow: auto;border: 1px black solid;width: 200px;height: 200px">
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
</div>
<div style="overflow: hidden;border: 1px black solid;width: 200px;height: 200px">
<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">
</div> <!-- background-repeat 设置是否及如何重复背景图像 -->
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y;width: 200px;height: 200px;border: 1px black solid"></div>
<!--background-position 属性设置背景图像的起始位置 -->
<div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png');width: 20px;height: 20px;border: 1px red solid;"></div> </body>
</html>
分层及层次分级
postion分层
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 不会随浏览器窗口的改变而改变。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 定位的层相对于离他最近的父元素。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 48px;
background-color: green;
position: fixed;
top:0;
left: 0;
right: 0;
}
</style>
</head> <!--postion 分层 fixed 绝对定位-->
<!--position: fixed 绝对定位 相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定-->
<!-- margin 外边距 top right bottom left -->
<body style="margin: 0">
<div class="c1">position: fixed</div>
<div style="background-color: black;height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;"></div>
<!-- margin-top 上外边距 -->
<div style="margin-top:48px;height: 100px;width: 100%;border: 1px red solid;background-color: pink">
金牛座 真厉害
</div>
<!--position：absolute 绝对定位 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，不会随浏览器的窗口变化-->
<!--position：relative 相对定位 定位的层总是相对于其最近的父元素，对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素-->
<div style="position: relative;width:500px;height:500px;border:1px black solid;">
<div style="position: absolute;width: 100px;height: 100px;background-color: red"></div>
<div style="position: absolute;width: 100px;height: 100px;background-color: black"></div>
<div style="position: absolute;width: 100px;height: 100px;background-color: blue"></div>
<div style="right: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: pink"></div>
</div>
<!--z-index 层次分级，数值大的显示在上层-->
<div style="position: relative;width: 200px;height: 200px;border: 1px red solid">
<div style="z-index: 10;position: absolute;width: 200px;height: 200px;background-color: red"></div>
<div style="z-index: 9;position: absolute;width: 200px;height: 200px;background-color: blue"></div>
</div> </body>
</html>
4.快速查看标签、id、类
Chrome查看标签、id、class
- 标签名#id值.class值
【前端】CSS基础的更多相关文章
- 前端 CSS 基础
CSS概述 CSS全称:层叠样式表 (Cascading Style Sheets).CSS使得网站可以:创建文档内容清晰地独立于文档表现层. 样式表定义如何显示 HTML 元素,样式通常保存在外部的 ...
- 前端 -- CSS基础
一,CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二,CSS语法 1 ...
- web前端 CSS基础
简单的CSS文件 <style type="text/css"> a{ color:rebeccapurple; font-size: larger; font-wei ...
- Python 前端 Css基础
CSS样式存在的位置 1.放置在标签内,局部生效 <div style="color: red;font-size: 18px;">hello world</di ...
- 百万年薪python之路 -- 前端CSS基础介绍
一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...
- 前端CSS基础
一:CSS 1.什么是CSS? CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). C ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Web前端开发基础 第一天（Html和CSS）
学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...
随机推荐
- eclipse有时候导入了包，但是还是有红线，找不到
clean一下工程,选择project->clean->clean project selected blow并且选择build only the selected project
- 图解http协议学习笔记
一 ,基本概念 1互联网相关的各协议族为tcp/ip协议(网际协议),tcp/ip ftp,DNS(通过域名解析ip地址),http(超文本传输协议) 还有很多协议 ,只是列举比较熟悉的 2tcp/ ...
- css让字体细长
transform: scale(1,3); -ms-transform: scale(1,3); -webkit-transform: scale(1,3); -moz-transform: sca ...
- keepalive + nginx 搭建高可用集群动态网站
环境准备: 两台节点部署keepalived,并且设为互为主从,实现高可用. 两台从节点部署nginx以及相关组件,作为真实服务器实现动态网站上线. 一.MASTER(BACKUP)节点下载keepa ...
- Python学习之==>文件操作
1.打开文件的模式 r,只读模式(默认)[不可写:文件不存在,会报错] w,只写模式[不可读:不存在则创建:存在则删除内容] a,追加模式[不可读:不存在则创建:存在则追加内容] r+,读写模式[可读 ...
- Selenium学习之==>WebDriver驱动对照表
转自www.imdsx.cn 1.Chrome 对于chrome浏览器,有时候会有闪退的情况,也许是版本冲突的问题,我们要对照着这个表来对照查看是不是webdriver和chrome版本不对. chr ...
- Linux中MySQL5.7设置utf8编码格式步骤
关于编码问题,真的是弄得我很郁闷,网上找的帖子这方面也很多但都无济于事,晚上终于找到一篇有效的,特此贴上. 转自Ubuntu中MySQL5.7设置utf8编码格式步骤 1.首先打开终端 2.输入mys ...
- 文档压缩 | gzip、bzip2、xz
6.文档的压缩与打包 Linux下常见后缀名所对应的的压缩工具 .gz 表示由gzip压缩工具压缩的文件 .bz2 表示由bzip2压缩工具压缩的文件 .tar 表示由tar打包程序打包的文件(tar ...
- kafka producer发送消息 Failed to update metadata after问题
提示示例: ERROR Error when sending message to topic test with key: null, value: 2 bytes with error: Fail ...
- 第二周JAVA总结
学海无涯,在学习这件事情上得用点心了