前端CSS

CSS介绍　

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

css三种引入方式：

　　1.行内样式（<p style.color=‘red‘>hello word</p>）

　　2.内部样式（写在head下，通过选择器的方式进行去调用渲染文本）

　　3.外部引用（<link href="mystyle.css" rel="stylesheet" type="text/css"/> ）

css的选择器：

　　标签选择器 例如： a ,div, span,p所有标签都可以进行选择

　　ID选择器：在属性栏目中设定了id这个属性的，可以通过#id的名称进行选中，id的值是具备唯一性的

　　类选择器：用.class属性名进行选择类选择器，class的属性名可以重复使用，也是运用最多的一种方式

　　通用选择器：*就是选中文档中所有的选择器

组合选择器：

　　后代选择器：通过缩进的方式进行选中，列入：div a{} 选中的就是div下所有的a标签也包括a标签内所有的元素

　　儿子选择器：通过大于号的方式选中，列入：div>p{}只选中div标签下的p标签，p标签内的子级标签不进行选中

　　弟弟选择器：通过中波浪号进行查找，举例：div~span{}选中的div下与span标签同级的标签都被选中

　　毗邻选择器：通过加号进行连接查找，举例：div+p{}选中的是div旁边同级的p标签

属性选择器：

　　属性选择器比较特殊，它是css内没有定义的属性，自己去定义的特殊属性

　　举例：p[title=‘123‘]{} ;选取带有指定属性和值的元素

伪类选择器:

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */  这个用的比较多
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
  background-color: #eee; #框里面的背景色
}

选择器的优先级：

当我们通过多种的方式对文本内容通过CSS进行渲染后，它最终到底是通过那种CSS的样式进行渲染呢？

CSS中是存在继承的关系的，子类会自动拥有父类除了自能私有外的其他属性：border, margin, padding, background等

所以选择器中会有优先级的特性，并且它是不具备进位的特性　　 

CSS属性相关：

　　宽和高

　　　　width属性可以为元素设置宽度。

　　　　height属性可以为元素设置高度。

　　　　块级标签才能设置宽度，内联标签的宽度由内容来决定。

　　文字字体:　boyd{font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif}#如果不支持第一个的话，就自动回滚到下一个

　　字体大小:     font-size:38px

　　字重（字体的粗细）font-weight：[normal(默认字中），bold(粗体），bolder(更粗），lighter(更细），100~900（自定义自重），inherit（继承父类大小）]

文字属性

　　　　文字对齐

　　　　　　text-align 属性规定元素中的文本的水平对齐方式。

　　　　文字装饰

　　　　　　text-decoration 属性用来给文字添加特殊效果。

　　　　去掉a标签的下划线

　　　　　　a{text-decoration: none;}

　　　　首行缩进

　　　　　　p {text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px}

背景属性：

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url(‘1.jpg‘);  #url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下
background-repeat: no-repeat; 
/*
 背景重复
 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/

/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片，就通过这个参数来调整，

前端CSS

原文：https://www.cnblogs.com/lowen107/p/10171299.html