css一些我所不熟练的属性
<hr /> 表示一条横线
css的三种创建方式:
外部样式表
<head>
<link
rel="stylesheet" type="text/css" href="mystyle.css
" />
</head>
内部样式表
<head>
<style type="text/css">
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
<pstyle
="color: sienna; margin-left: 20px">
This is a paragraph
</p>
当混合搭配时先是就近原则,当就近中没有时再继承将远处更具体的样式表。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。值:scroll(默认), fixed。
text-indent: 首行代码缩进
text-align: center; 文本水平对齐方式
text-transform: uppercase;字母大小写问题 capitalize 只对每个单词的首字母大写。
text-decoration: underline;文字装饰问题
word-spacing 属性可以改变字(单词)之间的标准间隔。
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。 white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。 下面的表格总结了 white-space 属性的行为:
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
border-collapse:collapse/separate(默认)
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
- outline-color 边框的颜色
- outline-style 风格
- outline-width 宽度
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
overflow可能的值:
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
clip 属性剪裁绝对定位元素。
可能的值
值 | 描述 |
---|---|
shape | 设置元素的形状。唯一合法的形状值是:rect (top, right, bottom, left) |
auto | 默认值。不应用任何剪裁。 |
inherit | 规定应该从父元素继承 clip 属性的值。 |
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释:元素可拥有负的 z-index 属性值。
注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!
伪元素
属性 | 描述 | CSS |
---|---|---|
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |
在标题后插入一张图片
h1:after
{
content:url(logo.gif);
}
css一些我所不熟练的属性的更多相关文章
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- CSS:布局的三个关键属性:float、position、display
最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- css hack 浏览器携带自身特有的属性 (二)
css hack 浏览器携带自身特有的属性,才是我们真正要解决的css 兼容问题. 这里只是分享思路. 举例子: 1 outline,尤其是一些 自带继承特性的属性.这里指的是 隐性的inherite ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- CSS学习笔记2-2d变换和过渡属性
前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...
随机推荐
- PBFT算法的相关问题
PBFT(99.02年发了两篇论文)-从开始的口头算法(指数级)到多项式级 要求 n>3f why: 个人简单理解:注意主节点是可以拜占庭的,从节点对于(n,v,m)的投票最开始也是基于主节点给 ...
- C 实现有追求的线程池 后续
引言 -_- 还是老套路开局 很久以前写过一个有追求的线程池 -> C 实现有追求的线程池 探究 讲述的是一种思路, 并且实现了. 可以一用. 最近在详细搞simplec 框架. 准备发布个正式 ...
- An In-Depth Look at the HBase Architecture
https://www.mapr.com/blog/in-depth-look-hbase-architecture An In-Depth Look at the HBase Architectur ...
- 文件上传实现ajax假异步
$.ajaxFileUpload({ url : getSitePath()+'/jlyElderly/doUpdateImage', secureuri : false,//是否需要安全协议 fil ...
- LeetCode解题报告—— Bus Routes
We have a list of bus routes. Each routes[i] is a bus route that the i-th bus repeats forever. For e ...
- 云联云通讯报错:应用与模板id不匹配,解决方法
<statusMsg>应用与模板id不匹配</statusMsg> 这种一般是后端服务器上配置的APP ID和模板ID所属的APP不一致造成的 找到发送模板短信的方法,修改ap ...
- WebDriver自动化测试工具(3)---PhantomJS的使用
PhantomJS是一个基于webkit的javascript API.它使用QtWebKit作为它核心浏览器的功能,使用webkit来编译解释执行JavaScript代码.任何你可以在基于webki ...
- bzoj 1449 费用流
思路:先把没有进行的场次规定双方都为负,对于x胜y负 变为x + 1胜 y - 1 负所需要的代价为 2 * C[ i ] * x - 2 * D[ i ] * y + C[ i ] + D[ i ...
- Python中的多进程:fork和multiprocessing
Python的多进程 套路1:os.fork() 先敲段代码: #!/usr/bin/env python3 import os os.fork() print('1111111111') 执行结果: ...
- Eclipse Qt开发环境的建立
1.下载Eclipse目前Eclipse+CDT已经可以集成下载了,好像优化过了,速度还比较快.下载的地址是:http://www.eclipse.org/downloads/,选择“Eclipse ...