网页搭建入门之HTML与CSS（2） -- CSS入门

css层叠样式表
什么是CSS：大名：Cascading(层叠) Style(样式) Sheets(列表)
css的作用：结构与样式分离的方式，便于后期维护与改版。可以用多层样式，使网页有任意样式切换的效果。使页面载入更快、降低服务器的成本

CSS基础
样式表分类：外部，内部，行内样式
外部，扩展名.css
内部，head内

<style type="text/css">
P{
background-color: red;
font-size: 40px;
}
</style>

CSS规则是由选择器和声明组成。声明要由花括号包围起来；属性和属性值之间用冒号分开；属性值如果有单位，那么数字和单位之间不能有空格；每条声明的结尾用分号结束；

CSS选择器作用：用来选择（找到）需要添加样式的位置。
标签选择器：

p{
}
<p>。。。</p>

类选择器：

.class1{
}
<p class="class1">kkkkkkkk</p>

样式的效果是可以叠加的

CSS样式设置
背景样式（background）
background-color： 背景颜色

background-image：图片位置

background-repeat：背景图片重复方向（repeat、repeat-x、repeat-y、no-repeat）

background-attachment：背景滚动方式（scrll、fixed）

背景图：background-image: url(“image/wudaojiaoshi.jpg”);

背景图片重复内容：
background-repeat默认repeat
background-repeat: repeat-y; 垂直重复
background-repeat: repeat-x; 水平重复
background-repeat: no-repeat; 不重复

背景图不变，文字跟滚动条滚动：background-attachment: fixed;

文字和图一起变动：background-attachment: scroll;
eg：

body{
/*background-color : yellow;
background-image: url("image/wudaojiaoshi.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 30px; */
background: yellow url("image/wudaojiaoshi.jpg") no-repeat fixed 20px 30px;
}

background-position 属性列表（第一个水平，第二个垂直）

background-position:top center;
background-position:20px 30px;

注：如果background-position中如果仅规定了一个关键词，那么第二个值将是"center"，如background-position: right;

CSS中设置文字字体使用的属性是font-family
font-size用来设置字体的大小
font-weight是用来设置字体的加粗
font-style用来设置字体的样式

外部样式表
引用外部样式表index.css
<link rel="stylesheet" type="text/css" href=“index.css”
link：指明所需要链接的关系，用于定义文档外部资源的关系
rel=“stylesheet”：链接样式表，rel时relationship的英文缩写，也就是“关系”
type=“text/css”:指明的是要链接的文件类型，定义css样式文件的类型
href=“index.css”:指明外部样式表的文件，引用的具体文件

CSS常用样式
文本类样式
color 设置文本颜色 例：color：red；或color：rgb（238，130，238）
颜色的设置：#后的数字只能是0-9，a-f，A-F，rgb()中的三个值的范围是0-255
direction 属性值 ltr（左对齐） rtl （右对齐） 文本的方向/书写方向
letter-spacing： npx（n可以是负数） 字符间距
line-height： npx 行高
text-align: left right center justify（两端对齐） 文本对齐方式
text-decoration： none,underline,overline,line-through 文本的修饰：
例如：下划线
text-shadow： h-shadow v-shadow blur color 文本设置阴影
text-shadow：5px 5px 5px red; 位置，程度，颜色
text-transform： none,capitalize（首字母大写）,uppercase,lowercase 改变字母大小写
text-indent： npx,nem 首行缩进（2em 2个字符）

字体类样式
font-family:隶属等 设置字体
font-style:normal、italic、oblique 规定斜体文本，规定字体的样式
font-weight：normal、bold、100-900 文本的粗细
font-size：npx 字体大小
font-variant属性可以将文字进行变形

p{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: 隶书；
}

注：italic和oblique的区别：italic对大多数的文字都有斜体效果，个别文字没有斜体效果。oblique对任何文字都有斜体效果。一般用italic

列表样式
list-style-type:（设置列表符号外观）none（无）或disc（默认）或circle（空心圆）或square（实心圆）或decimal（数字）
list-style-type的默认值，有序的默认是decimal，无序的默认是disc
list-style-position（列表符号位置）:inside或outside
list-style-image（把图像设置为列表项目的标记）:url（“图片路径”）或none
注意：如果image生效那么type自然会失效
可以把所有属性写在一个list-style:属性1；属性2；属性3；

伪类和伪元素
伪类选择器
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上（浮动、悬停）
a:active 向被激活的元素添加样式
：focus 选择拥有键盘输入焦点的元素，focus 获得焦点

<a href="#">伪类</a>
未被选中的状态（红色）

a:link{
color:red;
}

已经被选中的状态（绿色）

a:visit{
color:green;
}

悬停（黄色，字体30px）

a:hover{
color:yellow;
font-size:30px;
}

按下未离（蓝色）

a:active{
color:blue;
}

伪类的分类
状态伪类(上面)和结构性伪类
first-child 选择元素的第一个子元素
:last-child 选择元素的最后一个子元素
:nth-child() 选择元素的某一个元素或头顶元素，从左边开始数
:nth-last-child() 选择摸个元素的一个或多个特定元素，从右边开始数
:first-of-type 选择一个上级元素下的第一个同类元素

p：nth-child（2）｛
｝

伪元素选择器
伪类选择器：选择整体，用单冒号表示：
伪元素选择器：选择一部分，用双冒号表示：：
提示：*::selection中的“*”，可以实现整个页面的选中效果
::selection 选择指定元素中被用户选中的内容
::before 可以在内容之前插入新内容
::after 可以在内容之后插入新内容
::first-line 选择指定选择器的首行
::first-letter 选择文本的第一个字符

p标签的每一段之前添加“xxx”

p::before{
content：“xxx”:
} 

p标签的每一段之后添加“xxx

p::after{
content：“xxx”:
} 

p标签的每一段的第一行改变背景颜色

p::first-line{
background-color:yellow;
}

p标签的每一段第一个字符改变大小

p::first-letter{
font-size:30px;
}

p标签的选中改变颜色

p::selection{
background-color:yellow;
} 

其他选择器
class（.开头）允许重复，id（#开头）不允许重复，id是唯一的标识
*选择器，通配符，选择所有内容
id，*：选择指定元素中被用户选中的内容
逗号选择器：联合选择器
空格选择器：子孙(后代)选择器
#a p｛
｝
id标签a下的所有p标签被选中

>选择器：子选择器(不是子孙后代)
#a>p｛
｝
id标签a下一层级的p标签被选中

+选择器：相邻兄弟选择器
#a+p｛
｝
id标签a同一层级的p标签被选中

[]:属性选择器
p[class=“a”]{
}
p标签的属性class是a的元素选中

CSS选择器的优先级
① ！important
② 行内样式
③ ID选择器
④ 类选择器
⑤ 标签
⑥ 通配符
⑦ 浏览器默认属性

！important选择器一般不建议使用。会影响业务逻辑；
行内样式绝对不能大面积使用。小部分使用时允许的

优先级总结
行内元素样式设置> 内部样式设置 >外部连接样式设置

笔记跟源码来源：慕课网，Java实战课程 链接: 慕课网.