我的第十七篇博客---CSS
Posted sll-csdn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我的第十七篇博客---CSS相关的知识，希望对你有一定的参考价值。
css选择器：
将css添加到<head>与</head>之间，并用<style></style>标记声明的一种样式。
语法如下：
<style>
这里写css内容
</style>
全局选择器：设置所有标签使用同一样式，用*表示
语法：*{}
例如：*{color:red;} 所有字体都为红色
标签选择器：用于声明标记采用的样式
语法：p{color:red;} 所有p标签里的文字都是红色
类选择器：用来为一系列标签定义相同的样式
语法： .类名{color:red;}
例如：
<p class="a">我是你爸爸</p>
<div class="a">我是你爸爸</div>
在<style> .a{color:red;} </style> p标签和div标签里的文字都为红色
ID选择器：ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。（具有唯一性）
id选择器的语法：#id名{}
例如：
<style> #a{color:red;} </style>
<p id="a">我是你爸爸</p>
该p标签里的文字为红色
伪类选择器：
a :link(未被访问过，访问之前的状态）
a :hover(鼠标滑过)
a :active(鼠标按下)
a:visited(访问过后)
伪类选择器：用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上
我们这里只要求掌握超链接的伪类a:hover
伪类选择器的语法：
a:hover{}
优先级：
id>class>标签>全局
css属性：
文字属性：
1、color字体颜色
color属性：用于定义文字的颜色
2、font-size字号
font-size属性：设置文字的大小。常用的网页文字大小有：12px(正文),14px（标题）
3、font-family字体
font-family属性：设置文字字体，如宋体，黑体，隶书等
4、font-weight字体加粗
font-weight属性：设置文字的粗细程度，blod设置粗体，normal将粗体改为正常字体
5、font-style字体是否倾斜
italic倾斜
normal正常
段落属性：
1、文字修饰（text-decoration)
underline 下划线
overline 上划线
line-through 删除线
none 无修饰
例如：
<p text-decoration:underline;}
2、水平对齐方式（text-align)
text-align属性：设置文本的水平对齐方式。属性值可以设置为left、center、right等，即如何为文本设置左对齐、居中对齐和右对齐，其他值不要求掌握。
如<h2 text-align:center;>
3、文本缩进（text-indent)
text-indent属性：设置文本块中首行的缩进，属性值可设置为数值加单位或者用em设置缩进几个字，百分比和复制不要求掌握。
如：p{text-indent:24px;} 或 p{text-indent:2em;}
4、文本行高（line-height)
line-height属性：设置行间距，即行高。属性值可设置为数值加单位，百分比和负值，负值不要求掌握
如 p{line-height:25px;}
背景属性 background
背景属性包含背景色、背景图、背景重复、背景位置、背景附件和背景复合属性等
背景颜色：background-color
背景图片：background-img:url(路径);
背景重复：background-repeat:
属性值：repeat/no-repeat/repeat-x/repeat-y
背景位置：background-position:水平 垂直;
可以取得值为关键字，数值，百分比
水平：left,center,right
垂直：top,center,bottom
背景附件：（背景是否滚动 属性值：scroll(默认) 滚动 fixed(固定))
列表案例符号的样式 list-style
list-style-type :定义列表前面的项目符号
disc 实心圆、circle 空心圆、square 方块、none 不使用任何符号
list-style-image定义列表项标志的图像
语法：list-style-image:none\路径
list-style-position列表位置
语法：list-style-position:outside(默认、更靠里面)\inside
去掉列表案例符号的代码是：ul{list-style:none}
css盒子模型：
盒模型：
1、边框属性：
边框颜色：border-color 如border-color:red;
边框样式：border-style 常用边框样式：solid实线、dashed虚线、dotetd 点线、none 取消线
边框宽度：border-width 如：border-width:3px;
border复合属性可同时设置边框的宽度、样式和颜色 如：border:1px red solid;
单独设置一条边框如：
上边框 border-top,右边框 border-right,下边框 border-bottom,左边框 border-left
如：border-bottom:1px red dashed;
2、内填充
padding:内容与边框之间的距离
设置上内填充padding-top属性，右内填充padding-right属性
3、外边距：
margin:元素与元素之间的距离
上外边距 margin-top 属性，右外边距margin-right属性，下外边距 margin-bottom属性。
用长度加单位设置属性值： margin-left:200px
在div的css选择器里写 margin: 0 auto; 设置居中效果，但是当div被定位后就不好使了
复合属性：
padding复合属性设置所有内填充属性，用法如下：
属性值为一个数值如padding:10px;表示上右下左内填充都是10px
属性值为四个时，padding:10px 20px 30px 40px;表示上10右20下30左40
margin的复合属性与padding用法一样
padding对元素宽高的影响,会增加盒子的大小
盒子的实际宽=width+padding-left+padding-right
盒子的实际高=height+padding-top+padding-bottom
box-shadow 属性盒子阴影
box-shadow:1px 2px 3px red insert
1px表示水平阴影的位置。允许负值，必写
2px表示垂直阴影的位置。允许负值 ，必写
3px表示模糊距离，可选
red 表示阴影的颜色，可选
insert 将外部阴影（outset)改为内部阴影
text-shadow属性文字阴影：
text-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色
border-radius属性：
指定好圆角的半径，就可以绘制圆角边框了，
border-radius:20px;
gradient 渐变
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。线性渐变和径向渐变
绘制线性渐变：
background:linear-gradient(to bottom,red,yellow);
参数值 渐变方向
to bottom 从上往下
to right 从左往右
第二个参数和第三个参数分别表示渐变的起点色和终点色
网页布局：
网页布局指的是网页内容在页面上所处位置的设计
浮动float 属性 none(不浮动） left(左浮动） right(右浮动）
设置元素向哪个方向浮动
清除浮动clear属性
clear:both;全部清除
clear:left; 清除左浮动
clear:right; 清除右浮动
display属性
display:inline 可以让块状元素变为行内显示
display:block 可以让行内元素变为块状元素
行内元素：行内元素在一行显示，只能容乃文本或者其他行内元素；不可设置宽度（设置其他样式都可）高度
常用行内元素有：
a span input I b textarea strong select label br img time
块状元素：块元素一般都独占一行，可以容纳行内元素和其他块元素，常用块级元素有：
h1-h6 p div dt dl dd ul li ol table form hr
overflow属性：这个属性定义溢出元素内容区的内容会如何处理
1、overflow:hidden 隐藏，
2、overflow:visible 可见（默认值）
3、overflow:auto 自动，如有溢出内容，相应盒子便会显示滚动条
visibility 属性规定元素是否可见
使h2元素不可见：
h2{visibility:hidden;} (占位隐藏）
display:none (不占为隐藏）
定位：
定位：
1、psoition
absolute 绝对定位 如果父级元素没有相对定位 相对于浏览器窗口定位
relative 相对定位 相对于自己去定位，会保留原来空间
fixed 固定定位 （不常用）
static 静态定位（默认）
div{position:relation; top:100px}盒子位置向下移动了100px
绝对定位 如果父级元素没加相对定位 子元素的绝对定位就是相对于浏览器窗口 加了就是相对于父级元素
position
relative 相对 1、相对于自己定位
2、保留原来空间
absolute 绝对 1、 定位：父级元素设有相对定位 ，相对于父级元素
父级元素没有设相对定位，相对于浏览器窗口
2、不会保留原来空间（浮动一样）
元素的层叠顺序
1、z-index属性：设置元素的层叠顺序，属性值为无单位的整数值，值较大的元素会叠在值较小的元素之上
2、元素可拥有负的z-index属性值，默认是：auto,默认层是0
3、当没有设置z-index属性或层数相同时，后面的元素显示在上面
4、z-index的属性值，只能为整数，正整数，0，负整数
5、z-index值越大越靠上
以上是关于我的第十七篇博客---CSS的主要内容，如果未能解决你的问题，请参考以下文章
C++进阶第十七篇——二叉搜索树（概念+二叉搜索树实现+二叉搜索树的应用+二叉树性能分析）
Linux篇第十七篇——网络基础（概念+协议的认识+OSI七层模型+TCP/IP五层模型+网络传输的流程）
Linux篇第十七篇——网络基础（概念+协议的认识+OSI七层模型+TCP/IP五层模型+网络传输的流程）