欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS 的介绍

程序员文章站 2022-06-03 08:17:35
第一章 的介绍 1.CSS:“层叠样式表”,它是cascading style sheets的缩写,作用就是给HTML标签加表现形式(样式-显示),如:字体,图片,列表,位置等。 在浏览器中可以看到部分: HTML:“超文本标记语言”,主要作用把内容(文字、图片、视频等)放入网页中--结构 CSS: ......

 

第一章 的介绍

 

1.css:“层叠样式表”,它是cascading style sheets的缩写,作用就是给html标签加表现形式(样式-显示),如:字体,图片,列表,位置等。

CSS 的介绍

在浏览器中可以看到部分:

html:“超文本标记语言”,主要作用把内容(文字、图片、视频等)放入网页中--结构

css:“层叠样式表”,主要作用给html进行样式的显示,如何的布局--样式

javascript:“浏览器的脚本语言”,主要作用给html加动态效果(特效)--行为

css特点:

可以非常精准的定位,定位某个或某些标记,给这些标记加样式

htmlcss代码分离,减少后期工作量

 

第二章 css 基础

 

2.1 css 的基本语法

CSS 的介绍

css样式表由语法规则组成,由多个语法规则组成样式表

一个css语法规则由“选择器”和“声明语句”组成

选择器:如何的精准定位选择到某一个或某些html标记的方法,选择器有很多方式

声明语句:就是如何去给html标记加样式的属性和值,每个声明语句用分号结束,多个声明语句用花括号扩起来,这个时候就是给某个或某些标记加这个里面的所有样式(属性和值)

案例:

CSS 的介绍

2.2css的引入方式

1. 内嵌方式:把css样式表通过一对标签写在html文件的head标签中,当成html的标记来使用,一般情况都是写到head中,不推荐写到别的地方:

语法:

 

  <style type=:”text/css”>

     语法规则

<style>

 

案例:

CSS 的介绍

 

2.行内方式:把css样式成html的一个属性来写,如:<div style=”></div>

语法:

   <h1 style=”color:red; font-size:50px”>kkk</h1>

案例

CSS 的介绍

 

3.外链方式:把css样式表写到一个以cssindx.css)为结尾的文件中,把这个文件引入到某个html文件中,当前文件就会有css的效果实现,好处:一个css文件可以给多个html文件使用。

语法:

   <link rel=”stylesheet” type=”text/css” href=”具体的css文件路径”/>

案例:

CSS 的介绍

4. @import:可以在一个css文件中再次引用css

   @import url(“要引入的文件”)

 CSS 的介绍

 

2.3选择器

标准选择器:通配符选择器,标记选择器,类选择器,id选择器

1. 通配符选择器

语法:*{colorred}

注意:通配符是选择上所有的标记,但是少用,ie6不兼容

案例

CSS 的介绍

2. 标记选择器:

说明:直接写标记名来当成选择器来使用,选择器那个标记当前这个页面所有的都会发生改变

语法:标记名{colorred}

案例

CSS 的介绍

3. 类选择器:又称class”选择器

说明:每个html标记都有一个公共属性,class属性配合使用的就,这个css属性就是给某些某个标记加一类样式

语法:.class属性的值{color}

注意:类名可以给不同的标记加上,这时候这些标记统称为一类

再写css选择器是必须加(.

建议不管是某个或某些标记都是用类的方式

 

案例:

CSS 的介绍

4. id选择器

说明:每个html标记都有一个公共的属性id,每个id必须是唯一的

语法:#id的值{colorred;}

注意:id选择器只是给一个标记加样式,一般用于js的动态效果使用。

idclass是分开使用的,idjs使用的,class是给css使用的

案例:

CSS 的介绍

复杂选择器:多元素选择器,后代选择器,子类选择器,伪类选择器

5. 多元素选择器:

说明:把css多个基本选择器进行组合,组合成多种的选择方式

语法:div,p,ul,li,class,my{color:red}

注意:大型的网站一般都是用多元素来替代通配符

每个选择器都用(,)隔开

CSS 的介绍

 

6. 后代选择器

说明:在制作网站时会出现“嵌套”的形式,有可能是多级,而且每个多级标记相同,这个时候就可以选择某个标记中的某个内容

语法:第一代 第二代 第三代{color:red;}

注意:如果某一代有相同的标记,需要每代都写清楚

  p标签中不能嵌套一些块元素

案例:

CSS 的介绍

1. 子类选择器

说明:就是选择一代(或者子孙)

语法:父类 (选择器)>子类 (选择器)

案例:

CSS 的介绍

CSS 的介绍 

7.伪类选择器

说明:就是给超链接加样式的方法<a href=”#”></a>

link::默认状态

hover:放上状态

active:当点击时的状态(不放手)

visited:访问过的状态

语法: 选择器:状态{color :red;}

 

注意:一般是默认状态和访问过的状态设置成一样的效果

所有的标记都可以加伪类选择器

案例:

CSS 的介绍

 

第三章:css常用的属性

 

一:文字属性

 

属性名

描述

属性值

font-size

文字大小

像素(px)em(倍数)百分比(%

font-family

字体类型

宋体,微软雅黑,黑体等

值可以是一个或多个,用逗号隔开

font-style

斜体

 

italic(斜体)

font-weight

加粗

bold(加粗)100-900

 

 

案例:

CSS 的介绍

二:文本属性

属性名

描述

属性值

color

文本颜色

3rgb255255255) 十六进制(#cccccc) 单词(yellow)

text-align

文本水平对齐方式

left|center|right

text-decoration

文本修饰线

underline(下划线)overline(上划线)line-through(删除线) none()

line-height

行高

设置当前行的高度,目的的就是让网文本上下居中,高度和行高一致

text-indent

首行缩进

数值(px)如果是12号字,基本是翻倍

letter-spacing

字符间距

数值(px

word-spacing

单词间距

数值:(px)

案例:

CSS 的介绍

三:尺寸使用

说明:其实就是元素的宽和高,任何标记元素都有宽和高

 

属性名

描述

属性值

width

像素(px)百分比(%

height

像素(px)百分比(%

px

像素

浏览器都是由像素点(显示贞)

注意:块元素可以设置宽和高,行内元素设置宽和高是不起作用的,高不设内容自动撑出来

案例:

CSS 的介绍

 

 

 

四:列表属性

 

说明:对ul,ol,li,dl,dt,dd进行样式的设置

 

属性名

描述

属性值

last-style-type

列表的符号样式类型

none

CSS 的介绍

 

list-style-type

列表图片

url list-style-typeurl(../01.jpg)

list-style-position

列表符号的位置只对li

inside  outside

list-style

把三个属性的值都放到一个属性中

none url  inside 如果三个属性都有按照上面的顺序 没有的可以不写

 

 

 

 

 

 

案例

CSS 的介绍

tip:边框

border 粗细 样式 颜色 如:border1px dashed red

border-bottom: 下边框

 

五:背景属性

 

属性名

描述

属性值

background-color

背景颜色

16进制

background-image

背景图片

url

backtround-repeat

背景平铺方式

no-repeat repeat-x repeat-y

background-position

内景定位

x轴和y轴定位 如positionleft top 设置左右和上下

定位方式:

1. 单词定位方式:left|center|right  top|center|bottom 单词定位可以理解为九宫格

left top

center top

right top

 

left center

center center

right center

left bottom

center  bottom

right bottom

 

2. 像素定位方式:background-position50px 100px;  离左边50 离上面100

3. 百分比方式:background-position10% 20% 离左边 离右边

4. 混合方式: background-positioncenter 100px

 

background-attachment

背景固定

scroll(滚动 默认)fixed(固定)

background

简写形式

颜色 图片 平铺 定位固定 其中的选项可以不写

 

案例:

CSS 的介绍

精灵图:

说明:就是把很多的小图片放入到一个大的背景图中,这个图称为“精灵图”。

在制作网页时必须是背景图

CSS 的介绍

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     

 

 

 

 

 

 

 

 

 

 

 

 

 

 

案例: