二锅头帮你整理CSS

什么是CSS？

中文名称：层叠样式表 。英文全称：Cascading Style Sheets ，简称CSS。

CSS的作用：在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS的优势

1.内容与表现分离

2.减少网页代码量

3.有利于被搜索引擎收录

4.提高网页浏览速度

5.网页布局灵活

6.网页风格统一

CSS选择器
1.标签选择器：html中的所有标签都可以作为选择器

2.类（class）选择器：body内的所有元素都有class属性。

3.id选择器：body内的所有元素都有 id 属性。

类（class）选择器

定义：body标签中的所有标签都有class属性。 注：class名称可以重复使用。

使用：类（class）选择器使用标志符（句点）开头 后面写上类的名称。

id选择器

定义：body标签中的所有标签都有id属性。 注：一个页面中只能使用一个id名，id名必须是唯一。

使用：id选择器使用散列符号（#）开头，后面写上id的名称。

网页中引入CSS样式

内联（行内）样式：html中的所有标签都有style属性，在style属性中直接写入css样式。 示例：

内部样式表：将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

外部样式表：将css样式单独写入到一个 xxx.css外部文件中。 （1）使用link标签引入外部css文件。 （2）使用@import导入外部css文件

link标签引入外部样式文件

声明外部样式表：rel=“stylesheet”

引入的文件类型：type=“text/css”

引入的文件地址：href=”style.css“

样式优先级 行内（内联）样式 > 内部样式表 > 外部样式表

选择器优先级 id选择器 > 类（class）选择器 > 标签选择器

字体样式

字体类型

font-family

字体大小

font-size

字体风格

font-style

字体粗细

font-weight

字体属性

font

文本样式

color 设置文本颜色 red #362596 rgb(32,250,50)

text-align 设置元素水平对齐方式 left center right

text-indent 设置首行文本的缩进

line-height 设置文本的行高

text-decoration 设置文本的装饰 none:默认，标准文本 underline：定义文本下划线 overline：定义文本上划线 line-through：定义穿过文本的一条线

鼠标样式

defalut

默认光标

pointer

超链接指针

wait

等待状态

help

指示可用的帮助

text

指示文档

crosshair

鼠标呈现十字状

背景样式

**背景颜色：**background-color red #536256 rgb(30,250,13)

**背景图片地址：**background-image:url(图片路径) 图片绝对路径 图片相对路径

**背景重复方式：**background-repeat no-repeat 不重复 repeat-x 水平重复 repeat-y 垂直重复 repeat 默认重复

**背景定位：**background-position 像素：px 水平方向：left、center、right 垂直方向：top、center、bottom

CSS高级选择器

并集选择器 交集选择器 后代选择器 子元素选择器 属性选择器

并集选择器

多个选择器通过逗号连接而成 示例： div,p,span,.codeup,#helloid{

交集选择器

由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器 示例： div.codeup{

后代选择器

外层的选择器写在前面 内层的选择器写在后面 之间用空格分隔

标签嵌套时，内层的标签成为外层标签的后代

使用标签选择器、id选择器、类选择没有先后顺序

示例： div .codeup{

子元素选择器

通过 > 连接在一起而成 仅作用于子元素

示例： div>.codeup{ color:red; font-size:20px; }

属性选择器

选取带有指定属性的元素 选取带有指定属性和值的元素

示例： input[name]{ border:1px soild red; } input[type=”text”]{ border:1px soild red; } div[ class=“codeup”]{ color:red; }

边框样式

**边框颜色：**border-color

**边框粗细：**border-width

**边框简写：**border

盒子模型之内边距：padding

盒子模型之外边距：margin

css浮动

**float 属性：**left right none

**clear 属性：**none left right both

overflow 属性

auto

自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看超出内容

hidden

内容会被修剪，并且超出的内容是不可见的

visible

默认值。内容不会被修剪，会呈现在盒子之外

**verflow：visible：**超出内容不会被修剪，会正常显示在容器外部

**overflow：hidden：**超出内容会被修剪，并且超出内容是不可见的，隐藏的

**overflow：scroll：**超出内容会被修剪，但是浏览器会显示滚动条以便查看超出内容

**overflow：auto：**自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦