二锅头帮你整理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;     }

边框样式

二锅头帮你整理CSS_第1张图片

 边框颜色: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:自适应,如果内容被修剪,则浏览器会显示滚动条来查看超出内容

 

 

 

你可能感兴趣的:(css,前端)