前端爱好者的小白学习之路-3 CSS学习笔记-用CSS来提升网页开发的效率 学扎实CSS基础语法 麻麻再也不用担心我的网页页面布局太丑辣

更多细节请参考CSS参考手册

1.写在前面

关于CSS基础语法
【1】相比于HTML 内容及难度上有明显的提升
【2】CSS用来美化布局网页
【3】CSS中最为困难的地方 就是 布局结构
只有熟练地掌握了CSS语法基础 才能理解之后更复杂的知识点
并灵活地利用这些知识去进行 网页的布局
阅读完此文 你会得到——
关于CSS基础语法的要点
得到一个大致的学习CSS的方向

2.我的学习方式

【1】黑马程序员pink老师课程 跟随者课程上老师给出的例子 一个个地去理解 根据课程中提到的概念 记在笔记中 温故而知新
【2】菜鸟教程总结知识点
【3】将两个笔记对应着 总结出本篇学习笔记

3.网页布局中 CSS一定要熟练掌握这些！

3.1 （也就是本文）CSS基础语法
3.2 盒子模型——标准流（纵向排列盒子）
3.3 盒子模型——浮动（横向排列盒子）
3.4 定位（为js打好基础~）
学好这些并且多多练习之后，我们就能模仿着做出来一个完整的网页啦~

4.CSS基础语法

CSS背景

background-color:#pink;

background-image:url('图片路径');

background-repeat:no-repeat;不平铺
					repeat-x;水平方向平铺
					repeat-y;垂直方向平铺

background-attachment:fixed;滑动页面时 背景图片固定
							不写这句   背景图片一起动

background-position:right top;图片位置

其中 简写属性的方法为：将这些属性合并在同一个属性中.

body {
   
    background:#ffffff url('img_tree.png') no-repeat right top;
    /*			颜色    图片				不平铺		图片位置
	}

简写属性的顺序

background-position的详情

对位置的规定方法一：

background-position:x% y%  水平位置-x  竖直位置-y

对位置的规定方法二：

background-position:x y  水平位置-100px（空100像素的位置）  竖直位置-2em（空两个字的位置）

对位置的规定方法三：

background-position:left top-左上
background-position:right top-右上
background-position:center top-中上

CSS文本

文本颜色

用于设置文字的颜色

for example:

body {
   color:red;}
h1 {
   color:#00ff00;}
h2 {
   color:rgb(255,0,0);}

文本缩进

用来指定文本的第一行的缩进

p {
   text-indent:50px;}--缩进50像素
p {
   text-indent:2em;}--缩进2个字

文本对齐方式

用于设置文本的水平对齐方式

可以设置成——

居中对齐

h1 {
   text-align:center;}

对齐到左（默认）/右

p.date {
   text-align:right;}

例子如下：

天呐！右边好丑 咋办？！ 一行代码搞定！

text-align=justify===每一行被展开为宽度相等 左右外边距对齐

p.main{
   text-align=justify;}

现在再看！

舒服了！

文本修饰

主要：消除文本的下划线！

因为在之后的网页界面编写中，经常使用ul>li进行下拉列表或者导航栏的编写 所以需要清除由于li造成的字符前面的小圆点
所以text-decoration:none;的应用很多~

a {
   text-decoration:none;}

也可以用于加入一些特别效果

文本转换

指定在一个文本中的大写和小写字母

可用于所有字句变成大写

p.uppercase{
   text-transform:uppercase;}

所有字句小写

p.lowercase{
   text-transform:lowercase;}

每个单词的首字母大写

p.capitalize