Day 50 前端学习笔记：CSS（上）

Part 1: CSS 语法

　　CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

Part 2: CSS 引入方式（行内式、嵌入式、链接式、导入式）

　　推荐用：链接式

　　将一个.css文件引入到HTML文件中（记住！）

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

Part 3: 基本选择器

 

Part 4: 组合选择器

 
E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }
 
E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
 
E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

　　注意，关于标签嵌套：

　　一般，块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。需要注意的是，p标签不能包含块级标签。

Part 5: 属性选择器

 
E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; } 
 
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

Part 6: 选择器的优先级

    
1 !important (加在属性的value后面)

2 内嵌：<p style="color: aqua">PPPPPP</p>

3 id : 100

4 class: 10 

5 element: 1

6 继承

Part 7: CSS 属性操作

　　Part 7.1: 颜色属性被用来设置文字的颜色。

　　颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red
 
p { color: rebeccapurple;  }

 

　　Part 7.2 水平对齐

　　text-align 属性规定元素中的文本的水平对齐方式。

  • left      把文本排列到左边。默认值：由浏览器决定。
  • right    把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果。

 

　　Part 7.3 文本的其他属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
        h2 {text-align:center;}
        p.publish_time {text-align:right;}
        p.content {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 水平居中</h1>
<p class="publish_time">2017 年 5 月 17 号</p>
<p class="content">
    有个落拓不得志的中年人每隔三两天就到教堂祈祷，而且他的祷告词几乎每次都相同。第一次他到教堂时，
    跪在圣坛前，虔诚地低语：“上帝啊，请念在我多年来敬畏您的份上。让我中一次彩票吧！阿门。”
    几天后，他又垂头丧气回到教堂，同样跪着祈祷：“上帝啊，为何不让我中彩票？我愿意更谦卑地来
    服侍你，求您让我中一次彩票吧！阿门。”又过了几天，他再次出现在教堂，同样重复他的祈祷。如此周而
    复始，不间断地祈求着。到了最后一次，他跪着：“我的上帝，为何您不垂听我的祈求？让我中一次彩票吧！
    只要一次，让我解决所有困难，我愿终身奉献，专心侍奉您……”就在这时，圣坛上发出一阵宏伟庄严的声
    音：“我一直垂听你的祷告。可是最起码？你也该先去买一张彩票吧!”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

文本其它属性

/*


font-size: 10px;

line-height: 200px;   文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px  设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效


text-decoration:none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

font-family: 'Lucida Bright'

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行缩进150px

letter-spacing: 10px;  字母间距

word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写


*/

Part 8 边框属性

  • border-width
  • border-style (required)
  • border-color
 
border-style: solid;
  
border-color: chartreuse;
  
border-width: 20px;

border-top-style:dotted;

border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

 

Part 9: 外边距和内边距

Part 9.1 外边距

  • margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
  • padding:           用于控制内容与边框之间的距离；   
  • Border(边框):     围绕在内边距和内容外的边框。
  • Content(内容):   盒子的内容，显示文本和图像。

Part 9.2 内边距

　　单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。设置同margine

Part 10 float

　　FLOAT='left'（'right'）

　　关于float：

    if 是浮动元素：
     判断上一个元素是否是浮动的，如果是浮动的，则贴右边；如果不是浮动的，放下边
 
　　文档流中元素：放下边
posted @ 2017-11-03 20:45  折翼的壕哥  阅读(63)  评论(0)    收藏  举报