前端学习2(css基础巩固)

优先级 。内联样式》内部样式(head)》外部样式表》缺省设置

body {

     color:pink;

}

选择器

1.分组 可以直接对几个元素进行 :  h1,h2,h3 { ...   }

2. 派生 li strong { font-style: italic; } 把 li里面的strong元素赋予新的规则

3. 后代选择器 在文档中利用<em>

4. 子元素选择器 h1 > strong   h1里面strong子元素(而不是子元素的子元素)

5. id选择器 #idname { } 只能用一次   #sidebar p { } 派生id选择器(在sidebar里所有的p所赋予的新规则)

6.类选择器 .classname_abc { }   <h1 class="classname_abc">

.fancy td { }  fancy这个class中的td表格

td.fancy { }   类名为fancy的表格

7.属性选择器 

[某个属性]{ }           所有带有这个属性的元素

[title=abc] { }    <h1 title="abc">可以显示出来</h1>

[title~=hello] { } title名中包含hello的元素

[lang|=en] { } lang这个属性选择中开头是en的元素(开头必须是单词)

[lang^=e]{ } 开头(特定的值)

[lang$=e]{ }              结尾

[lang*=e]{ }               包含


样式表创建

<head>  <link rel="styleheet" type="text/css" herf="mystyle.css" />

</head>


背景 

  background-color: pink;

background-image:url(http://cs-server.usc.edu:45678/hw/hw3/images/sayhello.png);

background-repeat: no-repeat;

background-attachment:fixed 图像不会跟着文字滚动(文字浮在背景上,而不是贴在背景上:默认值scroll)

background-position:center; ( center/ top right ) background-position: 30% 20%水平位置 垂直位置

background-position:50px 100px

简写: background: url(/i/eg_bg_03.gif)  #ff0000  no-repeat fixed center;

您需要把background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。


文本

text-indent: 5em; / 20%;   首行缩进 

text-align: center / left /right / justify 自动调整字母间隔,使各行元素长度相等。

【<center> 和text-align: center的区别】 <center>可以把整个元素剧中,text-align只会影响元素中的文字居中显示

word-spacing:30px; 单词间距

letter-spacing:20px; 字母间距

line-hright: 200%; 30px;  2;   行高调整(行间距) 20px是标准行间距

text-transform: uppercase ;lowercase; capitalize . 全大写 全小写 所有单词首字母大写

text-decoration: underline; overline; line-through; blink闪烁 可以叠加使用(text-decoration: overline blink)

white-space: normal; 忽略换行符,多个空格只显示一个空格

     pre;       不会有任何的影响,有多个空格有换行

     nowrap; 不会换行,就算溢出,使用<br>换行

下面的表格总结了 white-space 属性的行为:

空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许


字体

font-family: georgia, serif, 'new york';  当浏览器没有georgia时使用serif,有空格的字体需要��引号

font-style: normal; italic;oblique; 正常;倾斜;倾斜

font-weight: normal; bold; 500; 700; 问题:很多时候是无效的,是否跟font-family有关?

font-size:16px; 1em; 300%;

普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值:

font : italic bold 12px/30px(大小/行距) arial, sans-serif (字体family)


链接的样式

a:link { } 未访问

a:visited{ }已访问

a:hover{ } 指针扫过

a:active{ }







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值