web样式css
css样式
什么是css
层叠样式表(Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,调整颜色,背景,文字风格
css的声明
css属性和值用冒号分隔,每条样式末尾加分号,
例:color:red;
通配符:*
应用到所有的元素,除<!doctype>以外
元素选择器:给某类元素标签统一应用样式
例p元素:p{color:red}
class选择器:将元素归成一类,对一类元素应用样式
例: .test{color:red}
id选择器:给元素设定一个唯一的标识符,仅单独对一个元素应用样式,通常用于js获取元素
例:#test{color:red}
权重:id选择器>class选择器>元素选择器
应用方式
1.内联样式
直接在标签元素中定义,添加属性和值
<p style="color: blue;background: gray;"></p>
2.当前页面内容应用样式
在头部内容中增加style样式内容
<head>
<style>
p { color : green; background : gray;}
</style>
</head>
<body>
<p>应用样式</p>
</body>
3.外联样式
通过link调用其他路径当中的.css文件
<link href="" rel="stylesheet">
文本样式
描述 | 属性:值 |
---|---|
文本颜色 | color:red; |
背景颜色 | background:red; |
字符间距 | letter-spacing:2em; |
空格间距(适用于英文) | word-spacing:10px; |
字行间距 | line-height:10px; |
对齐方式 | text-align:center/left/right; |
文本缩进 | text-indent:2em; |
注:单文em是相对字体大小而定的,属于相对单位
装饰文本(decoration):
值 | 描述 |
---|---|
none | 无装饰 |
underline | 下划线 |
line-through | 中划线 |
overline | 上划线 |
注:a标签默认添加下划线,通过text-decoration:none取消掉
字体样式
属性 | 描述 |
---|---|
font-size | 字体大小 |
font-family | 字体类型 |
font-style | 字体风格normal/italic(倾斜) |
font-weight | 100-300(细体),400-500(默认),600-900(粗体) |
背景属性
属性 | 描述 |
---|---|
background-color | 背景颜色 |
background-image:url() | 背景图片 |
background-repeat | 背景填充,repeat(默认平铺方式),no-repeat(不重复图像),repeat-x(以x方向重复平铺图像),repeat-y(以y方向平铺图像) |
background-postion | 背景定位(x,y方向) |
background-size | 背景大小(cover:使图像x方向拉伸到最大最大尺寸) |
css补充
三类元素
1.块级元素
a. 前后的元素都会被换行,允许设置宽高度
b. 浮动(float)、定位(fixed、absolute)不占空间的样式,会变为“块” (不能用margin进行居中)
2.内联元素
a.前后元素不会被换行
b.不能设置宽度,也没有垂直方向的外边距
3.内联块
内联元素的块,单用拥有了块的特质(不会被换行)
样式调整
display:
block(块元素)
inline(内联元素)
inline-block(内联块);
text-align:center(居中文字,内联元素,内联块)
margin:0 auto(居中块元素)
vertical-align:top/middle/bottom(对块中内联元素进行调整)
overflow
value | desc |
---|---|
visible | 默认 |
hidden | 清除浮动样式,隐藏块中内容溢出部分 |
auto | 内容溢出时,显示右侧滚动条 |
scroll | 不管是否溢出,都显示滚动条 |
阴影(立体效果)
box/text-shadow: | 1px | 1px | 1px | black |
---|---|---|---|---|
阴影 | 左右 | 上下 | 浓度 | 颜色 |
注:text-align:center对p标签可以居中,对span标签不能
圆角
css | desc |
---|---|
border-radius | 50%以上,正方形盒子为园,长方形为椭圆 |
border-top-left-radius | 上左 |
border-top_right-radius | 上右 |
border-bottom-left-radius | 下左 |
border-bottom-right-radius | 下右 |
制作三角形
.box {
width: 0;
height: 0;
border-top: 5px solid red;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
css3样式
直接选择对元素进行渲染,不需要创建对象
p:first-child{}
p:last-child{}
p:nth-child(){}
css-float(浮动)
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素
注:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
value | desc |
---|---|
left | 向左浮动 |
right | 向右移动 |
none | 默认值,元素不浮动 |
inherit | 继承父元素float的值 |
块元素浮动之后脱离文档流,原来位置不占空间
上行块框浮动之后,下行文字将围绕浮动框
清除浮动
1.在浮动元素之后加上一个带有清除样式的盒子:
<div class="clear"></div>
.clear{clear:both;}
2.在父级元素当中加上样式overflow:hidden;
定位(position)
1.相对定位(relative)
以自身位置作为参考进行移动
移动后,原先位置保留,不会有元素占据其位置
2.绝对定位(absolute)
有父级定位时,以父级定位作参考进行移动,当没有时,以浏览器作为参考
移动后,不占据原来空间
3.固定定位(fixed)
以浏览器做参考进行移动
不占据空间
4.层级关系(z-index)
只允许调整定位的元素层级显示关系,值越大越靠前,值相同则覆盖显示
web样式css的更多相关文章
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- FontAwesome 4.7.0 中完整的675个图标样式CSS参考
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com ...
- Tridiv:基于 Web 的 CSS 编辑器,创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- WEB前端--CSS
一.认识CSS 1.概念 CSS(Cascading Style Sheet,层叠样式表),可以将网页制作的更加绚丽多彩.它可以有效的对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 2. ...
- node.js入门学习(二)MIME模块,request和response对象,demo之不同url请求不同html页面,页面包含图片、样式css等静态资源
一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...
- web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
随机推荐
- OpenCV3入门(十二)角点检测
1.角点介绍 角点检测(Corner Detection)是计算机视觉系统中用来获得图像特征的一种方法,广泛应用于运动检测.图像匹配.视频跟踪.三维建模和目标识别等领域中,也称为特征点检测.在图像中角 ...
- 盒马微信小程序
盒马app刚出现,就吸足了眼球.最近看了看盒马界面,很Q,就想着仿照app写个小程序. 功能介绍 好奇微信小程序是如何制作的,也对盒马app感兴趣,就尝试写了这个盒马小程序.实现了app的部分功能,还 ...
- 用jQuery怎么做到前后端分离
传统的web开发模式想必大家都知道,不管是jsp.asp.php或者一些魔板引擎开发,其实道理都是一样的,都是服务端渲染,原理是:浏览器发送一个get请求,服务器对应的返回前端一个html页面,由浏览 ...
- 个人理解TCP中SYN Cookie
说起SYN Cookie还是得从TCP3次握手开始说起,先给出计网的体系结构图 然后解释一下SYN,seq,ack,ACK的相关名词 SYN(建立连接) ACK(确认后全部为1) PSH(传送) FI ...
- NLP(二十四)利用ALBERT实现命名实体识别
本文将会介绍如何利用ALBERT来实现命名实体识别.如果有对命名实体识别不清楚的读者,请参考笔者的文章NLP入门(四)命名实体识别(NER) . 本文的项目结构如下: 其中,albert_ ...
- Ubuntu 16 编译装python2.7
Ubuntu 16自带 python3 ,有很多库无法使用,决定装 python2.7 试了试,好像 apt-get 装不上. 使用源码,编译安装. wget https://www.python.o ...
- MySQL数据库常用命令行整理(表格)
Laplace Kang 2020-03-13T08:33:09Z 2020-03-14T17:35:53Z Sheet1 12480 9 600 600 6 9600 23040 0 0 600 0 ...
- JavaMail(一):利用JavaMail发送简单邮件
JavaMail,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.但它并没有包含在JDK中,要使用JavaMail首先要下载ja ...
- 学习 CSS 之用 CSS 3D 实现炫酷效果
一.前言 把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上. 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3 ...
- 【分布式锁】04-使用Redisson实现ReadWriteLock原理
前言 关于读写锁,大家应该都了解JDK中的ReadWriteLock, 当然Redisson也有读写锁的实现. 所谓读写锁,就是多个客户端同时加读锁,是不会互斥的,多个客户端可以同时加这个读锁,读锁和 ...