CSS小记 - HelloWorld开发者社区

======CSS

CSS: 层叠样式表，用于修饰、渲染网页的一门技术

-----在HTML中引入CSS

方式1：通过style属性引入css（不推荐）

1.通过标签上的style属性给div设置样式
边框:2px solid red
字体大小:26px
背景颜色为:pink
-->
<div style="border:2px solid red;font-size:26px; background:pink;">
这是一个div...</div>

由于上面这种方式是将css样式代码，直接写在标签上的style属性内部，如果属性太多，容易造成页面结构的混乱，不利于后期的维护。
将样式代码写在标签上，样式代码只对当前标签生效，代码无法复用！并且使用这种方式无法将html标签和css样式进行分离! 因此不推荐使用这种方式！（这种通过style属性添加的样式，叫做行内样式/内联样式）

方式2：通过style标签引入css

在head标签内部可以添加一个style标签，在style标签内部可以直接书写css样式这种方式是将所有的css样式代码集中在一个style标签内部统一管理，这种方式不会造成页面结构的混乱，并且可以实现代码的复用！初步的实现了将html标签代码和css样式代码进行了分离!

<!-- 2.通过style标签给span设置样式如下：
边框: 2px solid green
字体大小: 30px
字体加粗
-->
<head>
<meta charset="utf-8">
<style type="text/css">
    /* ****** CSS样式 ****** */
span{ /* 为当前html中的所有span标签设置样式 */
border:2px solid green;
font-size:30px;
font-weight:bolder; /* bold/bolder */
}
</style>
</head>

方式3：通过link链接引入外部的css文件

在head标签内部，通过一个link标签可以引入外部的CSS文件这种方式是将所有的css代码集中在一个单独的css文件中统一管理，真正的实现了将css代码和html代码的分离，实现了代码的复用。代码示例：html中引入demo.css文件

<!-- 3.通过link标签引入外部的css文件，为p元素设置样式如下：
边框: 2px solid blue;
字体颜色:red
字体设置为华文琥珀
设置首行文本缩进50px
-->
<!-- 引入demo.css文件(中的样式) -->
<link rel="stylesheet" href="demo.css" />
@charset "UTF-8";
p{
border: 2px solid blue;
color: red;
font-family: "华文琥珀";
text-indent: 50px;
}

-----CSS选择器
css选择器就是能够在html中帮助我们选中元素进行修饰的一门技术

标签名选择器

通过元素名称(或标签名称)选中指定名称的所有标签格式: 元素名/标签名{ css样式... }

将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
span{ /* 选中所有的span元素 */
background-color:#efbdef;
font-size: 22px;
font-weight: bolder;
}

class选择器

可以为元素添加一个通用的属性 -- class，通过class属性为元素设置所属的组， class值相同的元素则为一组。通过class值可以选中这一组的元素，为元素添加样式。格式：.class值{ css样式... }

1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，
边框改为2px solid cyan；
(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色
设置
#ec0e7e；*/
.s1{ /* 选中所有class值为s1的元素 */
background: #faf77b;
border: 2px solid cyan;
}
.s2{ /* 选中所有class值为s2的元素 */
background: #5eff1e;
color: #ec0e7e;
}
一个元素也可以设置多个class值，多个class值中间用空格分隔，
`<span class="s1 s2" >span111</span>`
表示当前元素同时属于多个分组，多个分组上设置的样式也会同时作用在当前元 素上。 
如果多个分组设置了相同的样式（但是值不一样），样式会发生冲突，
写在后面 的样式会覆盖前面的样式！

id选择器

通过标签上通用的属性id，可以为标签设置一个独一无二的编号（id值应该是唯一的），通过id值可以唯一的选中一个元素。格式：#id值{ css样式 }

20px。*/
#p1{ /* 选中id值为p1的元素 */
font-size:24px;
color: #a06649;
text-indent: 20px;
}
<p id="p1">这是一个p元素!!!</p>

后代选择器

选中指定元素内部的指定后代元素格式: 祖先后代{ css样式... }

pink;*/
p span{ /* 匹配所有p元素内部的所有span元素 */
font-size:18px;
color: red;
background: pink;
}
/* p,span{} 匹配所有的p元素和所有的span元素 */
<p id="p1">
这是一个p元素!!!
<span>这是一个span元素!!!</span>
</p>

属性选择器

为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进
15px；*/
input[type='text']{ /* 匹配所有的input并且type值为text的元素 */
background: #FF7CCC;
font-size: 22px;
text-indent: 15px;
}
input[type='text'][name='email']{
/* 选中所有的input并且type值为text、并且name为email的元素 */
background : yellow;
}

-----常用属性总结

文本属性

text-align ：设置元素内的文本水平对齐方式，其常用取值为:
left: 默认值。左对齐 right: 右对齐 center: 居中对齐 justify: 两端对齐
text-decoration ：设置文本的下划线样式，其常用取值为:
underline: 有下划线 none: 没有下划线
text-indent ：设置文本首行缩进，单位: 像素/百分比
letter-spacing ：设置字符间隔/间距，其常用取值为:
normal 像素值
text-shadow ：设置字体阴影，其取值为：
像素值像素值像素值颜色值
第一个值为阴影水平位移，第二个值为阴影垂直位移，第三个值为阴影扩散值，第四个值为阴影颜色
字体属性
font-size ：设置字体大小
font-weight ：设置字体粗细 normal、bold、bolder 100/200/300../900
font-family ：设置字体，比如微软雅黑、黑体、楷体等
color ：设置字体颜色
背景属性
background-color ：设置背景颜色
background-image ：设置背景图片，url('图片的路径');
background-repeat ：设置或检索对象的背景图片是否及如何排列，常用取值：
1. repeat(默认值,重复排列)
2. repeat-x(横向重复排列,但纵向不重复)
3. repaet-y(纵向重复排列,但横向不重复)
4. no-repeat(不重复)
边框（border）
border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色) border属性可以拆分为如下设置：
1. order-width: 2px; -- 设置元素边框的宽度
2. order-style: solid; -- 设置元素边框的样式
3. border-color: red; -- 设置元素边框的颜色
  其中border-width、border-style、border-color也可以按照上右下左方向进行拆分，以border-width为例：
border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

display属性

display用来设置元素的类型，常用取值：

block：块级元素的默认值
默认情况下独占一行
可以设置宽高
inline：行内元素的默认值
默认情况下多个行内元素可以处在同一行
一般不能设置宽高
inline-block：行内块元素
多个元素既可以显示在同一行, 也可以设置宽和高
none：表示隐藏元素

其他属性

width：设置元素的宽度 height：设置元素的高 margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px; margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;

margin: 10px 20px 30px 40px; -- 上右下左, 顺时针方向对应
margin: 10px 20px 30px; -- 上左右下 margin: 10px 20px; -- 上下左右
margin: 10px; -- 上下左右都是10px;

颜色设置

颜色取值方式常见的方式有三种
方式一：设置颜色名，例如：red、green、blue、yellow、cyan、pink、white、black等
方式二：设置#加上六位的十六进制数值 \#FF0000（red）、#00FF00（green）、#0000FF（blue）、#FFFF00（yellow）、 #00FFFF（cyan）等
方式三：设置rgb颜色值 rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、 rgb(0,255,255) == （red）（green）（blue）（yellow）（cyan）

元素类型

div/span/p 都是一个容器标签，用于包裹其他内容（这些元素本身不具备太多的
样式！）
p: 块级元素，默认独占一行，用于包裹一段文本（写文章时用于p标签包裹每一
段内容）
div: 块级元素，默认独占一行，用于包裹其他内容，将样式设置在div上，就可以
作用在div的内容上。
span：行内元素，默认可以和其他元素显示在同一行。
...
(1)块级元素（block）
默认情况下，块级元素独占一行
可以设置宽和高，如果设置了就是设置的宽和高
如果不设置宽和高，其中宽是默认填满父元素，而高是由内容决定(由内容支撑)
比如: div/p/h1~h6/form/table 等元素都是块级元素
(2)行内元素（inline）
默认情况下，多个行内元素可以处在同一行
不能设置宽和高
比如: span/input/img/i/b 等元素都是行内元素
(3)行内块元素（inline-block）
既具备行内元素的特征(可以同行显示)，还具备块级元素的特征(可以设置宽和
高)