CSS学习心得(一)

  • 使字体按照从上到下的方式显示(古汉字书写习惯)
    writing-mode:vertical-rl

CSS语法

  • CSS规则
规则

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

  • CSS实例

CSS声明总是以分号(;)结束,声明组以大括号({})括起来

p
{
color:red;
text-align:center;
}
  • CSS 注释

/*.....*/可以用来对CSS进行注释,浏览器会自动忽略。

CSSID和CLASS选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

  • ID选择器
  1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  1. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

  2. 以下的样式规则应用于元素属性 id="para1":

  3. ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

    para1

    {
    text-align:center;
    color:red;
    }

  • Class选择器
  1. class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
  1. class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
  2. 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

所有拥有 center 类的 HTML 元素均为居中。

 .center {text-align:center;}

拥有center类且为HTML p 元素的居中。

p.center {text-align:center;}

CSS创建

  • 外部样式表
    适用于样式需要应用于很多页面的情况,每个页面使用 <link> 标签链接到样式表。 <link> 标签在(文档的)头部:

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

  • 内部样式表
    适用于单个文档需要特殊的样式的情况,使用 <style> 标签在文档头部定义内部样式表:

    <head>
    <style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
    </style>  
    </head>
    
    • 内联样式

适用于仅需要在一个元素上应用一次时,很少使用。

使用内联样式,你需要在相关的标签内使用样式style属性。

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
  • 层叠样式表层叠顺序

所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

CSS背景

  • CSS背景属性
property 含义
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
  • 背景- 简写属性

为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时,属性值的顺序为::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS文本格式

  • 文本颜色(color)

对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。

  • 文本对齐方式(text-align)

当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

  • 文本修饰(text-decoration)
    overline:上划线
    line-through:中划线
    underline:下划线

  • 文本转换(text-transform)
    uppercase:大写
    lowercase:小写
    capitalize:首字母大写

  • 文本缩进(text-indent )

单位:px

ps:在浏览器中若想显示引号,则使用"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,508评论 32 459
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,803评论 0 6
  • 那是一个昏沉的下午,接连几场大雨直接加深了开学所带来的沉重心情,我在店里,忙着将各种文具和资料整理摆上货架。老师坐...
    三横三阅读 333评论 1 1
  • 天天下雨心好烦 眼看三月快过完 何时能把生意谈 等待单来把张开
    品尝人生_548e阅读 151评论 0 0