css层叠样式表
css的三种声明方式
1、行内样式
通过每个标签都有的style属性
<div style="color:red;">黄卫星说没有内容</div>
2、内联样式
通过在head里写style标签,style标签里写样式
<style>
div {
color:gold;
}
</style>
3、外联样式
通过link标签来引入css代码
<link rel="stylesheet" type="text/css" href="1.css" />
优先级:
网页加载顺序决定优先级
就近原则
伪类选择器(要按下面的顺序避免出错)
a:link {
color:red;
}
a:visited {
color:pink;
}
a:hover {
color:black;
}
a:active {
color:blue;
}
属性选择器
input [ type=text ]
单位
px 像素
% 百分比
em 根据父级元素的尺寸
rem 根据html的尺寸,例:2rem;就是两个字体的大小;
vw 窗口宽度的百分比
vh 窗口高度的百分比
【注】css的优先级对比,权重比精确定位更优先;
文本修饰:
text-indent 文本缩进;例子: text-indent:2rem;
text-shadow 文本阴影
text-shadow:10px 10px 10px red;
1、水平偏移量 可以为负
2、垂直偏移量 可以为负
3、阴影模糊值 不可以为负
4、阴影部分颜色
text-overflow 文本超出的显示方式
clip 超出部分截断
ellipsis 超出时显示...
【注】 要想让他生效的话需要设置
overflow:hidden;
white-space:nowrap;
还要给元素设置宽度
line-height 行高 【注意】当行高与元素高度一样时会使文本垂直居中
vertical-align 对齐方式 经常用于设置图片
top 顶端对齐
middle 中间对齐
bottom 底端对齐
背景
background-color 背景颜色
background-image 背景图片 background-image:url(./image/xxxx);
background-attachment 背景图片是否跟着滚动条滚动
fixed 相对于窗口固定 (这个功能好像经常看到)
scroll 随滚动而滚动
background-repeat 背景图片是否平铺
background-position 背景图片定位
left right top bottom 百分比
【注】css的功能真的很强大好用(完)
css层叠样式表的更多相关文章
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- 《精通CSS层叠样式表》
书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完
- CSS:CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
- 【HTML/XML 7】CSS层叠样式表
导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...
- 实验时css层叠样式表不更新的情况
自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...
- 前端内容之CSS层叠样式表
CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...
- CSS层叠样式表的层叠是什么意思(转自知乎)
转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...
- css 层叠样式表
css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <style type="text/css">body{ font-size:12px; color:re ...
随机推荐
- UI篇之——用户体验
内容均为原创,转载请注明处处谢谢. 用户体验(User Experience,简称UX)是一个关于用户(users)以及交互(interactive)技术系统领域的整体概念.具体来说,它代表了一个网站 ...
- C#基础知识-面向对象思想之继承(八)
上一篇的标题编程思想我觉得不是很符合主题,因为编程思想的范围太大了,不仅仅是封装 继承 多态,所以比较符合主题的应该是面向对象思想.这一篇中将继续叙述面向对象思想中的继承. 从字面来看继承表达的意思已 ...
- 有关SQL模糊查询
执行 数据库查询时,有完整查询和模糊查询之分. 一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,%:表示任意0个 ...
- 用window的onload事件,窗体加载完毕的时候
<script type="text/javascript"> //用window的onload事件,窗体加载完毕的时候 window.onload=function( ...
- 关于php的一些安全知识
绝不要以明文形式显示或发送密码.即使是对密码的所有者也应该这样.如果你需要 "忘记密码" 的功能,可以随机生成一个新的 一次性的(这点很重要)密码,然后把这个密码发送给用户 你希望 ...
- SSH工作原理图
一个请求在Struts2框架中的处理大概分为以下几个步骤 : 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请求 2 这个请求经过一系列的过滤器(Filter)(这些过滤器中有一个叫 ...
- 最小的 Velocity 教程
工作以后,我越来越能体会到80/20法则的强大. 这是一个不可否认的事实,常用 20% 的技术可以解决工作中 80% 的场景. 所以我希望能介绍给你 Velocity 技术 20%,帮助你胜任 80% ...
- Python3 从入门到出门
引:此文是自己学习python过程中的笔记和总结,适合有语言基础的人快速了解python3和没基础的作为学习的大纲,了解学习的方向:笔记是从多本书和视频上学习后的整合版. (一)初识python 1. ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- centos+apache 2.x 开启gzip压缩
最近做了一个网站(PHP+Apache+MySQL),挂在百度云平台上面,基本配置是2G内存+5Mb带宽,每次打开主页都需要2-3s左右的时间,对于一个垂直搜索引擎来说,用户体验肯定会很差. 于是开始 ...