一、CSS的常见用法
基本语法规范：选择器+{n条声明}
【注】：选择器决定修改谁；声明决定修改什么；声明的属性是键值对，使用；区分键值对，使用：区分键和值
<body>
<p>
这是一个段落
</p>
<style>
p{
color:green;
font-size:30px;
}
</style>
</body>
二、引入方式
1.内部样式：使用style标签，直接把css写到html文件中，此时的style标签可以放任何位置，一般建议放到head标签里面。如上面的代码。
2.内联样式
使用style 属性，针对指定的元素设置样式，此时不需要写选择器，接写属性键值对，这个时候样式只是针对当前元素生效。
<body>
<p style=" color:red;font-size: 30px;">
这是一个段落
</p>
<p>
这是另一个段落
</p>
</body>
3.外部样式（最常用）
把css代码单独作为一个.css文件中，再在html的代码中通过link标签引入该文件。这种方式可以让多个html复用同一份样式
<body>
<p>
这是一个段落
</p>
<p>
这是另一个段落
</p>
</body>
//style.css
p{
color:red;
font-size: 30px;
}
三选择器
选择器的功能：选择页面中的元素，可以一次选一个，也可选一批。
CSS中的选择器种类非常多，下面列出了其中最常用、最简单的几种。
1.标签选择器
在{前面写标签名字，此时意味着会选择当前页面中所有的指定标签：
<body>
<style>
p{
color:yellow;
font-size: 30px;
}
</style>
<p>
这是一个段落
</p>
<div>
这是另一个段落
</div>
</body>
2.类选择器
更好的选择，可以创建css类，手动指定哪些元素应用这个类
<body>
<style>
.one{
color:red;
}
.two{
color:green;
}
.three{
color:blue;
}
</style>
<div class = "one">
这是一个段落
</div>
<div class = "two">
这是第二个段落
</div>
<div class = "three">
这是第三个段落
</div>
</body>
3.ID选择器
html中的每一个元素，都可以设置唯一的id，作为元素的身份标识，给元素安排了id之后，就可以通过id选择对应的元素。
<body>
<style>
#oneDiv{
color:red;
}
#twoDiv{
color:blue
}
</style>
<div id = "oneDiv">
这是一个Div
</div>
<div id = "twoDiv">
这是另一个Div
</div>
</body>
【注】：类选择器，是可以让多个元素应用同一个类；id选择器，则只能针对唯一的元素生效，因为一个页面里，只能有一个唯一的id。
4.后代选择器：把多个基础选择器组合一下
<body>
<style>
ul li{
color:red;
}
</style>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
<body>
<style>
.one li{
color:red;
}
</style>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ol>
<ul class = "one">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</body>
【注】：li只要是ul的后代即可，不一定非得是子元素。
5.子选择器：把多个简单的基础选择器组合（标签、类、id选择器任意组合），只是找匹配的子元素，不找孙子元素之类的
<body>
<style>
.one > a{
color:red;
}
</style>
<div class = "one">
<a href="#">链接1</a>
<div>
<a href="#">链接2</a>
</div>
</div>
</body>
6.并集选择器
<body>
<style>
.one,.two{
color:blue;
}
</style>
<div class = "one">
<a href="#" class="one">链接1</a>
<div>
<a href="#" class="two">链接2</a>
</div>
</div>
</body>
7.伪类选择器
前面的元素是选中某个元素，伪类选择器选择某个元素的某个特定属性
hover：鼠标悬停时侯的状态；
active：鼠标按下时候的状态；
四、常用元素属性
1.字体属性
(1)设置字体：font-family，当前使用哪种字体来显示
【注】：这个属性指定的字体，要求必须要是系统已经安装了的，如果要使用一些特殊的字体，系统上没有，则不能正确显示。
(2)设置字体：font-size 浏览器的每个文字可以视为一个方框，如果是英文阿拉伯数字，方框就比较窄；如果是中文，一般就是一个正方形。
(3)字体粗细：font-weight来设置，实际设置的时候，有两种典型的设置风格：使用单词和使用数字
(4)文字样式：font-style：italic 设置倾斜；
font-style：normal 取消倾斜
<body>
<style>
.one{
font-size: 30px;
font-family: '微软雅黑';
font-weight: bold;
font-style: italic;
}
.two{
font-size: 30px;
font-family: '宋体';
font-weight: normal;
}
</style>
<div class = "one">
这是一个div
</div>
<div class = "two">
这是另一个div
</div>
</body>
2.文本属性
(1)文本颜色：在前端中，每个分量使用一个字节来表示，范围是0-255/0-0xFF
color：red;
color:#ff0000
color:rgb(255,0,0)
(2)文本对齐 : 控制文字水平方向的对齐.
text-align:center /*居中对齐*/
text-align:left /*左对齐*/
text-align:right /*右对齐*/
(3)文本装饰
text-decoration:underline /*下划线*/
text-decoration:none /*下划线*/
text-decoration:overline /*上划线*/
text-decoration:line-through /*删除线*/
(4)文本缩进：控制段落的首行缩进
text-indent：2em;/*文本缩进，可以取负数，表示往左缩进*/
(5)行高：行高指的是上下文本行之间的基线距离
HTML中展示文字设计到这几个基准线：顶线、中线、基线、底线
内容区：底线和顶线包裹的区域
line-height: 40px
<body>
<style>
.one{
color:red;
text-align: left;
text-decoration: underline;
text-indent：2em;
line-height: 40px;
}
.two{
font-size: 10px;
font-family: '微软雅黑';
font-weight: normal;
}
</style>
<div class = "one">
这是一个div
</div>
<div class = "two">
这是另一个div
</div>
</body>
3.背景属性
(1)背景颜色：默认是 transparent (透明) 的. 可以通过设置颜色的方式修改。
background-color：black /*黑色*/
(2)背景图片：
background-image: url(rose.jpg);
【注】：url 不要遗漏；url 可以是绝对路径，也可以是相对路径；url 上可以加引号，也可以不加
(3)背景平铺：
backgroud-repeat:repeat /*平铺*/
backgroud-repeat:no-repeat /*不平铺*/
backgroud-repeat:repeat-x /*水平平铺*/
backgroud-repeat:repeat-y /*垂直平铺*/
(4)背景位置
background-position: x y;
参数有三种风格：方位名词:(top/ bottom/ left/ right/ center)
精确单位：坐标或者百分比（以左上角为原点）
混合单位：同时包含方位名词和精确单位
backgroud-position:center center
backgroud-position:10px 50px
(5)背景尺寸
backgroud-size：length|percentage|cover|contain;
【注】：①可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px；②也可以填百分比: 按照父元素的尺寸设置；③cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中；④contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
4.圆角矩阵
html里面的元素默认是矩形，可以通过CSS中的border-radius设置圆角效果。
border-radius: length;
5.元素的显示模式
display：block 块级元素(div / h1 - h6 / p / ul / ol/ li / table )等；
display：inline 行内元素(a / strong / b / em / i / del / s / ins /span)等；
块级元素和行内元素的区别：
(1)块级元素会独占一行，行内元素不独占一行
(2)块级元素高度、宽度、内外边距都是可以设置的；行内元素高度、宽度、行高无效，内边距有效，外边距有时候有效有时候无效。
(3)块级元素默认宽度和父元素一样宽，行内元素默认宽度和里面的内容一样宽。
6.盒模型
每一个html元素，都可以看成一个矩形，这个矩形由：外边距、边框、内边距、内容构成。边框 border；内容 content；外边距 margin
内边距 padding
(1)边框：边框默认情况下会撑大盒子，width和height表示的是内容部分的尺寸。
基础属性：粗细 border-width；样式：border-style；颜色：border-color
(2)边框会撑大盒子
box-sizing: border-box 可以修改浏览器的行为，使边框不再撑大
(3)内边距
padding 可以设置边框和内容之间的距离，可以直接通过padding设置，也可以分开设置某个方向的边距。
a)基础写法：默认内容是顶着边框来放置的. 用 padding 来控制这个距离。
可以给四个方向都加上边距
padding: 2px; /*整体设置*/
padding-left: 0%;
padding-right: 10%;
padding-top: 0%;
padding-bottom: 0%;
b)复合写法：可以把多个方向的padding合并到一块
padding: 5px; /*表示四个方向都是 5px*/
padding: 5px 10px; /*表示上下内边距 5px, 左右内边距为 10px */
padding: 5px 10px 20px; /*表示上边距 5px, 左右内边距为 10px, 下内边距为20px*/
padding: 5px 10px 20px 30px; /*表示上5px, 右10px, 下20px, 左30px (顺时针)*/
(4)外边距
(a)基础写法 :控制盒子和盒子之间的距离.
可以给四个方向都加上边距:
margin-top：20px
margin-bottom:20px
margin-left:20px
margin-right:20px
(b)复合写法：规则同 padding
margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
7.弹性布局(弹性布局主要是安排页面上的元素的排列方式)
上面的属性大部分是针对一个元素本身来设置的，但是这里还有些元素是影响到元素和元素之间的，如外边距。而弹性布局可以进一步强化这一点。简单说就是：块级元素默认独占一行，但是使用弹性布局就可以使其能够在一个横行中排列
flex布局中的三种最常见操作：
(1)设置为弹性布局
display:flex
(2)设置水平方向排列
justify-content:flex-start; /*靠左排列*/
justify-content:flex-end; /*靠右排列*/
justify-content:flex-center; /*居中*/
justify-content:flex-between; /*元素等分间隔*/
justify-content:flex-start; /*元素等分间隔，包括最左边和最右边*/
(3)align-items:设置元素垂直方向上的排列方式
align-items：stretch：/*默认值，行拉伸以占据剩余空间*/
align-items：center;/*朝着容器的中央对行打包*/
align-items:flex-start; /*朝着容器的开头对行打包*/
align-items:flex-end; /*朝着容器的结尾对行打包*/
align-items:space-between; /*行均匀分布在弹性容器中*/
align-items:space-around; /*行均匀分布在弹性容器中，两端各占一半*/
<body>
<style>
div{
width: 150px;
height:200px;
background-color: red;
display: flex;
justify-content: space-between;
}
div > span{
background-color:green;
width: 30px;
}
</style>
<div>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
</div>
</body>
7369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
