美文网首页
css学习笔记(2)

css学习笔记(2)

作者: 海的那一边 | 来源:发表于2018-10-23 15:54 被阅读14次

1.css背景

1)背景色
有外延的文字背景色:
p{background-color:blue;padding:10px;}
p{background-color:#0000ff}
p{background-color:rgb{0,0,255}
background-color不能继承,默认值transparent,意思是透明。
2)背景图片
可以给body、段落等设置背景图片
body{background-image:url(i/test.gif);}本地路径?
p.test{background-image:url(j/test.gif)}
<p class=“test”>这个段落的背景图片是test中定义的颜色<p>
3)背景图片重复
可以在水平、垂直对背景图片进行重复。
水平:repeat-x
垂直:repeat-y
不平铺:no-repeat
body{
background-image:url(i/test.gif);
background-repeat:repeat-x;
}
不写重复的会默认水平垂直都平铺
4)背景图片定位
使用关键词top,left,right,bottom,center,关键词可以成对出现,也可以只出现一个,另外一个默认是center
body{
background-image:url(i/test.gif);
background-position:center right;
}
使用百分数值定位,第一个代表垂直方向,第二个代表水平方向,如果只出现一个,这个值代表水平值。
body{
background-image:url(i/test.gif);
background-position:10% 90%;
}
使用像素值定位,第一个代表距离上方的距离,第二个代表距离左边的距离。
body{
background-image:url(i/test.gif);
background-position:10px 80px;
}
5)背景图片固定
可以时背景图片不随着页面滚动
body{
background-image:url(i/test.gif);
background-position:center right;
background-attachment:fixed
}

2.css文本

1)文本缩进
不能应用到行内元素。
p{text-indent:2em;}
可以使用负值,但是为了前面的文字避免超出浏览器,可以使用padding
p{text-indent:4em;padding-left:5em;}
2)水平对齐方式
它会影响一个元素中的文本行互相之间的对齐方式
左对齐:
p{text-align:left;}
右对齐:
p{text-align:right;}
居中对齐:
p{text-align:center;}
3)字间隔
增加单词间距:
p{word-spacing:10px;}
减少单词间距:
p{word-spacing:-0.2px;}
4)字母间距
增加单词间距:
p{letter-spacing:10px;}
减少单词间距:
p{letter-spacing:-0.2px;}

5)处理文本大小写
默认不做任何改动
小写变为大写:
h1 {text-transform: uppercase}
大写变为小写:
h1 {text-transform: lowercase}
首字母变大写:
h1 {text-transform:capitalize}

6)文本装饰
不装饰、关闭文本装饰:
a {text-decoration: none;}
文本下划线装饰:
a {text-decoration: underline;}
文本上划线装饰:
a {text-decoration: overline;}
文本中间贯穿线:
a {text-decoration: line-through;}
本文闪烁:
a {text-decoration: blink;} 但是这个我试了没有生效

3)css字体
字体:font-family 包括通用字体系列和指定字体系列
大小:font-size
h1 {font-size:60px;}
或者
h1 {font-size:1.5em;}浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
样式:font-style:normal、italic、oblique
粗细:font-weight:blod、100~900

4)链接:
a:link {text-decoration:none;} /* 未被访问的链接 /
a:visited {text-decoration:none;color:gray} /
已被访问的链接 /
a:hover {text-decoration:underline;color:blue} /
鼠标指针移动到链接上 /
a:active {text-decoration:underline;} /
正在被点击的链接 */
active必须位于hover之后
hover必须位于link和visited之后

5)列表
<style type="text/css">
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
ul.disc{list-style-type:disc}
</style>

<ul class="disc">
<li>水</li>
<li>咖啡</li>
</ul>

图片作为列表项图标:
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
链接:http://www.w3school.com.cn/css/css_background.asp

相关文章

  • css学习笔记(2)

    1.css背景 1)背景色有外延的文字背景色:p{background-color:blue;padding:10...

  • CSS学习笔记2

    css常用属性 盒模型 包含:内容、padding、border、margin 盒模型相关属性 内容属性 widt...

  • CSS学习笔记(2018-07-29)

    CSS学习笔记 CSS 指层叠样式表 (Cascading Style Sheets) CSS语法 CSS 规则由...

  • CSS入门学习笔记

    CSS学习笔记 CSS= 层叠样式表 cascading style sheets HTML 表达结构 , CSS...

  • 2.CSS学习笔记

    在学习之前需要对HTML知识有基本的了解。主要是用来对HTML的元素进行美化的,所以以下只是一个便于查阅的阅读材料...

  • 前端学习笔记_css(2)

    resize 该元素在页面的大小是不被固定的,其解决方法: 或者 opacity与rgba()的区别 测验可以看出...

  • 收集前端学习资料

    前端的一些学习资源 html和css代码规范 前端知识体系 前端网址大全 学习CSS布局 通用 CSS 笔记、建议...

  • CSS知识点整理

    写在前面:这是一篇学习CSS的笔记。重点在于罗列CSS的知识点。 CSS ㈠ CSS入门 什么是CSS?CSS 指...

  • 二、easyui笔记

    学习笔记一:jquery学习 Ceng coding的用法 Css速写:一般css样式都是开头简写+tab键补全,...

  • css的层叠

    css2的css的层叠 《css世界》的读书笔记,非原创。背景是css2。 z-index只是层叠规则中的一个属性...

网友评论

      本文标题:css学习笔记(2)

      本文链接:https://www.haomeiwen.com/subject/cpjazftx.html