CSS学习

CSS语法

由2部分组成：选择器，一条或多条声明
选择器h1, 每条声明由font 属性，pink 值组成。
h1{color:pink;font-size:20px;}

常用的css语法

/p {color:pink; }/ 注释
text-align:center 居中

设置背景
background-image:url(“images/smile.gif”)
background-color:red
background-position:center
background-repeat:no-repeat

常用的标签

---

横线

CSS选择器

id选择器

id选择器以#来定义，id选择器不要以数字开头。如：
样式规则应用于元素属性id=“para1”：

哈哈哈

class选择器

class选择器可用于描述一组元素的样式
在html中，class表示一个属性；
在css中，类选择器以一个点“.”标识。

1. 用于所有的class属性

段落2

段落3

2. 只用于其中一个class属性

段落2

段落3

CSS创建

外部样式表external

当样式需要应用于多个页面，可采用css外部样式。
在使用外部样式表的情况下，你可以通过改变一个.css文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
extranal.css文本：
p{color: pink;}
b{color:green;}
body {background-image:url("//C:/Users/yuchunli/Pictures/Saved Pictures/singto.jpg");}

.html文本

段落

标题1 标题2

内部样式internal

内联样式inline

样式仅需要在一个元素上应用一次时，可使用内联样式。
需要在相关标签上使用样式（style）属性

这是一个段落

优先级

内联样式>内部样式>外部样式>浏览器默认样式

CSS背景

背景色

p{background-color:“red”;}
注：background-color属性是不能继承的，默认值为transparent，意思是如果不设置值，默认为透明色，这样其祖先元素的背景才能可见。

背景色是设置的border边框内的背景色（自我理解）

背景图片

body{background-image:url("//C:/Users/yuchunli/Pictures/Saved Pictures/singto.jpg");}
注：background-color属性默认值为none，设置背景图片，必须设置url(“图片路径”)。图片的路径链接为反斜杠。

背景平铺

body{background-image:url("//C:/Users/yuchunli/Pictures/Saved Pictures/singto.jpg");
background-repeat:no-repeat;
}
注：
background-repeat:repeat-x; 背景图片水平重复
background-repeat:repeat-y； 背景图片垂直重复
background-repeat:repeat； 背景图片水平垂直都平铺
background-repeat:no-repeat; 不允许在任何方向上平铺

背景定位

body
{
background-image:("//C:/Users/yuchunli/Pictures/Saved Pictures/singto.jpg");
background-repeat:no-repeat;
background-position:center;
}

注：background-position:center 设置图片位置为中间

background

简写属性，作用是将背景属性设置在一个声明中。

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

CSS文本

注：文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等

文本颜色

颜色值的不同写法与单位（属性值与单位之间不要留空格，如20px而不是20 px）：
p { color: pink; }
p { color: #FFC0CB; }
p { color: rgb(225,225,225); }
若值为多个单子，则需加引号
p {font-family: “Eve Polastri”;}

文本对齐方式

• p {text-align:left;} 左对齐
• p {text-align:right;} 右对齐
• p {text-align:center;} 居中对齐
• p.main {text-align:justify;} 在所有p元素中，属性值为main的p元素 文本对齐方式都设置成justify, 意味着每一行被设置成宽度相等，左、右外边距是对齐（如报纸和杂志）

文本横线装饰text-decoration

访问有用的提示部分

a{text-decoration:none;} 主要用于删除链接的下划线
a{text-decoration:overline;} 在“访问有用的提示部分”上面画一条线，多用于其他文字的修饰，下同
a{text-decoration:over-through;} 在“访问有用的提示部分”文字中间横穿一条线
a{text-decoration:underline;} 在“访问有用的提示部分”下方画一条线

文本大小写转换

p.uppercase{text-transform:uppercase;} 将标签p属性class="uppercase"的段落全部大写
p.lowercase{text-transform:lowercase;} 将标签p属性class="lowercase"的段落全部小写
p.capitalize{text-transform:capitalize;} 讲标签p属性class="captialize"的段落首字母大写

文本缩进

p{text-indent:50p;} 将p段落的第一行缩进50px

注：text-indent 用来指定文本第一行缩进

文本方向direction

文本方向：？？？

文字方向：
from right to left
from left to right

字符间距letter-spacing

设置字间距word-spacing

设置行高letter-height

设置文本阴影text-shadow

设置或返回文本是否被重写text-shadow

元素垂直对齐

td{vertical-align:bottom;}
td{vertical-align:top;}
注：垂直对齐属性设置垂直对齐，比如顶部，底部或中间

设置元素中空白的处理方式white-space

CSS字体

字体样式

p.normal{font-style:normal;} 字体正常显示
p.italic{font-style:italic;} 字体倾斜

字体大小

1. h1{font-size:300%;}
   注：300%代表多大？和48px感觉差不多？？？

2. h1{font-size:2.5em;} 60pixels/16=3.75em 即 60像素=3.75em*16像素
   注：
   用em设置字体大小,在设置字体大小时，1em的值相对于父元素的字体大小而改变。
   上面的例子表示：16 等于父元素的默认字体大小。因此 1em 的默认尺寸是 16 像素。
   像素转换为 em：pixels/16=em
   假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em。

3. 使用百分比和EM（在所有浏览器中均有效的方案）
   body 元素（父元素）以百分比设置默认的 font-size 值。

font

在一个声明中设置所有的字体属性

字体系列font-family

body{font-family:Serif;}

指定文本的字体系列：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

font-variant

以小型大写字体或者正常字体显示文本。
font-variant:small-caps; 格式化

font-weight

指定字体的粗细。

CSS链接

css链接样式

注：顺序不能错

css链接文本修饰

a:link {text-decoration:none;} 属性主要用于删除链接中的下划线
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

CSS链接背景色

a:link {background-color:#B2FF99;} 指定链接背景色
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS列表

不同的列表项标记

注：list-style-tyle属性的值还有：
lower-roman 小写罗马数字 i ii iii
list-style-style:none 什么都没有

• 本特利
• 威廉
• 民国

1. 第一名
2. 第二名

列表项图像

• [ul{list-style-image: url(‘xxx.gif’);} 要指定列表项标记的图像，使用列表样式图像属性 ？？？？？？？？ ]

列表标志位置

list-style-position 设置列表中列表项标志的位置。

简写列表样式

可以将以上 3 个列表样式属性合并为一个方便的属性：list-style。
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

CSS表格

	<!--caption:定义表格标题-->
	<!--colgroup:定义表格列的组-->
	<!--col：定义表格列的属性-->
	<!--thead:定义表格的页眉-->
	<!--tbody：定义表格的主体-->
	<!--tfoot:定义表格的页脚-->

css表格边框

标题

表头1	表头2
第一行，第一列	第一行，第二列

注：这实例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

css折叠边框

注：border-collapse为表格设置合并边框模型.border-collapse属性和border属性一起使用，会正常显示表格单边框。

css表格宽度和高度

注：table的宽度为100%，会占满整个浏览器？？？？
width属性
height属性

css表格文字对齐

text-align

注：text-align 参考《文本对齐方式》
text-align属性设置水平对齐方式，像左，右，或中心

vertical-align

注：vertical-align参考《元素垂直对齐》
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

css表格填充

td{padding:15px;}
注：如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

css表格颜色

table, td, th{border:1px solid green;}
th{background-color:green;color:white;}

注：指定了边框的颜色，和th元素的文本和背景颜色

CSS轮廓

outline

outline 位于边框外围。

在段落边框外加轮廓

注：outline 在一个声明中设置所有的轮廓属性，设置颜色、样式和宽度。

outline-style

outline-style: 轮廓样式

点线轮廓

虚线轮廓

实线轮廓

双线轮廓

凹槽轮廓

垄状轮廓

嵌入轮廓

外凸轮廓

outline-width

设置轮廓宽度。

设置轮廓宽度。

注：outline-width 轮廓跨度，属性值可以为thick,thin,像素5px。

outline-color

outline-color: 轮廓颜色

CSS边框

border

简写属性，用于把针对四个边的属性设置在一个声明。

border-style

注：border-style属性用来定义边框的样式。

border-top-style（4个边的样式）

注： CSS边框单独设置各边:
border-top-style
border-right-style
border-bottom-style
border-left-style

border-width

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；
或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
p {border-style: solid; border-width: 5px;}

border-top-width(4个边的宽）

注：为四个边框设置宽度

border-color

border-color属性用于设置边框的颜色。

可以设置的颜色：
name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。

border-top-color（4个边的颜色）

注：为4个边框设置颜色

border-top（上边的所有属性）

注：简写属性，用于把上边框的所有属性设置到一个声明中。
还有类似的
border-left
border-right
border-bottom

CSS外边距

margin-top

注：设置元素的上外边距。还有下外边距，左外边距，右外边距。

没有设置边距

此段落设置了边距

----------

margin

简写属性，在一个声明中设置所有外边距属性。
p.margin
{
margin:50px 50px;
}

CSS内边距

padding

使用简写属性设置在一个声明中的所有填充属性。

padding-top

设置元素的顶部填充。

padding-bottom

设置元素的底部填充。

padding-left

设置元素的左边填充。

padding-right

设置元素的右边填充。

CSS定位

position:static

div.static {
position: static;
border: 3px solid #73AD21;
}

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响

position:fixed

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

positon:relative

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
注：
relative是相对于正常位置进行操作的。
好比left：-20px，相对于正常位置（默认的位置）的原始左侧位置减去 20 像素。
left:20px，相对于正常位置（默认的位置）的原始左侧位置增加20像素。

h2.pos_top
{
position:relative;
top:-50px;
}
注：移动相对定位元素，但它原本所占的空间不会改变。（移动后，移动前的位置没有了元素，但是这个所占的空间不会改变）

相对定位元素经常被用来作为绝对定位元素的容器块。

position:absolute

h2
{
position:absolute;
left:100px;
top:150px;
}

注：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

父元素和子元素

absolute 定位使元素的位置与文档流无关，因此不占据空间。
absolute 定位的元素和其他元素重叠。

position:sticky

基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

z-index

属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

overflow

属性规定当内容溢出元素框时发生的事情

overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。
overflow:hidden 内容会被修剪，并且其余内容是不可见的。
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
overflow:inherit 规定应该从父元素继承 overflow 属性的值。

overflow-y

指定如何处理顶部/底部边缘的内容溢出元素的内容区域

overflow-x

指定如何处理右边/左边边缘的内容溢出元素的内容区域

CSS浮动

float：left

float:right

clear:both

指定不允许元素周围有浮动元素。

CSS组合选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)

后代选择器用于选取某元素的后代元素。

div p
{
    background-color:pink;
}
</style>
</head>
<body>
<div>
<p>div中</p>   后代元素
</div>
<p>不在div中</p>
</body>

子元素选择器(以大于号分隔)

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

<style>
div>p
{
    background-color:pink;
}
</style>
</head>
<body>
<h1>没在div中，非p元素</h1>
<div>
<h2>div中,非p元素</h2>
<p>div中，p元素</p>         子元素
</div>
</body>

相邻兄弟选择器（以加号分隔）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

<style>
div+p
{
    background-color:pink;
}
</style>
</head>
<body>
<h1>div前，h1</h1>
<div>
<h2>div中，h2</h2>
<p>div中，p元素</p>
</div>
<p>div后第一个p元素</p>     相邻兄弟
<p>div后第二个p元素</p>
</body>

普通兄弟选择器（以破折号分隔）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

<style>
div~p
{
    background-color:pink;
}
</style>
</head>
<body>
    <p>div之外，p元素</p>
<div>
<p>div之内，第一个p元素</p>
<p>div之内，第二个p元素</p>
</div>
<p>div之外，第一个p元素</p>           普通兄弟
<p>div之外，第二个p元素</p>           普通兄弟
</body>

CSS 对齐

CSS对齐块元素

块元素指的是占据全部可用宽度的元素，并且在其前后都会换行
块元素的例子：

<h1>...</h1>
<p>...</p>
<div>...</div>

使用margin属性来水平对齐

可通过将左和右外边距设置为 “auto”，来对齐块元素。
把左和右外边距设置为 auto，规定的是均等的分配可用的外边距。结果就是居中的元素

<style>
.center
{
margin:auto;
width:70%;                        必须要加上width，不加就不会居中，不知道为什么
background-color:pink;
}
</style>
</head>
<body>
<div class="center">
<p>居中-----------------------居中</p>
<p>居中---------------------------------------居中</p>
</div>
</body>

使用position属性进行左和右对齐

对齐元素的方法之一是使用绝对定位

<style>
.right
{
position:absolute;
right:0px;
width:450px;
background-color:pink;
}

使用float属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：

CSS伪类

语法
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}

锚伪类

伪类和CSS类

a.pink:visited {color:pink;}
wiki主页

first - child伪类

<style>
p:first-child
{
    color:pink;
} 
</style>
</head>
<body>
<p>第一个p元素</p>         first-child 伪类来选择元素的第一个子元素
<p>第二个p元素</p>
</body

p > i:first-child

first-child 伪类来选择相匹配的所有

元素的第一个 元素

<style>
p > i:first-child
{
    color:pink;
} 
</style>
</head>
<body>
<p><i>第一个p元素，第一个i元素</i>--<i>第一个p元素，第二个i元素</i></p>      
<p><i>第二个p元素，第一个i元素</i>--<i>第二个p元素，第二个i元素</i> </p>
</body>

注：p>i 子元素选择器，选择i；first-child 选择第一个i

p:first-child i

p:first-child i
{
color:pink;
}

第一个p元素，第一个i元素--第一个p元素，第二个i元素

第二个p元素，第一个i元素--第二个p元素，第二个i元素

注：p:first-child 选择第一个p元素
p:first-child i 选择第一个子元素的

元素中的所有 元素。

lang伪类

一个普通的p元素加了伪类的p元素接上一个未完的普通的p元素

```

注：lang 类为属性值为 no 的q元素定义空心五角心的类型

CSS伪元素

语法
selector:pseudo-element {property:value;}

:first-line伪元素

first-line"伪元素用于向文本的首行设置特殊样式。

<style>
p:first-line 
{
color:pink;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>首行特殊设置------首行特殊设置------首行特殊设置------首行特殊设置------首行特殊设置------首行特殊设置------首行特殊设置------首行特殊设置</p>
</body>

:first-letter 伪元素

first-letter 伪元素用于向文本的首字母设置特殊样式

<style>
p:first-letter 
{
    color:pink;
    font-size:xx-large;
}
</style>

伪元素和CSS类结合

p.article:first-letter {color:pink;}
<p class="title">标题</p>

注：所有 class 为 title 的段落的首字母变为粉色

多个伪元素

<style>
p:first-letter
{
    color:pink;
    font-size:xx-large;
}
p:first-line 
{
    color:brown;
    font-variant:small-caps;
}
</style>

注：在上面的例子中：
段落的第一个字母将显示为粉色，其字体大小为 xx-large。第一行中的其余文本将为棕色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示

:before伪元素

:before伪元素可以在元素的内容前面插入新内容。

<style>
h1:before  {content:url(//img.mukewang.com/wiki/5b51796f0111369400350036.jpg);}
</style>
</head>
<body>
<h1>一个h1元素</h1>
<p>一个p元素</p>
<h1>一个h1元素</h1>
</body>

注：在每个 h1元素前面插入一幅图片

CSS-:after伪元素

:after"伪元素可以在元素的内容之后插入新内容。

<style>
h1:after {content:url(//img.mukewang.com/wiki/5b51796f0111369400350036.jpg);}
</style>
</head>
<body>
<h1>一个h1元素</h1>
<p>一个p元素</p>
<h1>一个h1元素</h1>
</body>

CSS导航栏

垂直导航栏

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: pink;
}
 
li a {
    display: block;
    color: gray;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: darkseagreen;
    color: white;
}
</style>
</head>

<body>
<ul>
<li><a href="https://class.imooc.com/">职业路径</a></li>
<li><a href="https://www.imooc.com/">慕课网</a></li>
<li><a href="https://coding.imooc.com/">实战</a></li>
<li><a href="https://www.imooc.com/">慕课网</a></li>
</ul>

<p>背景颜色添加到链接中显示链接的区域</p>
<p>注意,整个区域是可点击的链接,而不仅仅是文本。</p>
</body>

水平导航栏

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: pink;
}
li {
    float:left
}
li a {
    display: block;
    color: darkslategray;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}
   
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: darkseagreen;
    color: white;
}

CSS图片廊

<style>
div.img {                             class为img的包括图片和描述
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}
div.img:hover {
    border: 1px solid #777;
}
div.img img {                     		class为img的后代子元素img
    width: 100%;
    height: auto;
}
div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="图片1地址">
      <img src="图片1地址" alt="图片描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
  
<div class="responsive">
  <div class="img">
    <a target="_blank" href="图片2地址">
      <img src="图片2地址" alt="图片描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
  
<div class="responsive">
  <div class="img">
    <a target="_blank" href="图片3地址">
      <img src="图片3地址" alt="图片描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
 <div class="responsive">
  <div class="img">
    <a target="_blank" href="图片4地址">
      <img src="图片4地址" alt="图片描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>
</body>