css 介绍

1、CSS介绍

CSS:Cascading Style Sheets -层叠 样式表

HTML:搭建网页结构

CSS:在网页结构基础上增加样式效果

css 就是给 html 定义外观 ,html是毛坯房css 就是装修


如果CSS的内容与HTML属性相冲突的话:优先使用CSS


2、CSS的使用方式(重点)


1、内联方式


将CSS的内容定义在单独的HTML元素中


语法:


<ANY style="样式声明">


样式声明:


1、样式声明由样式属性名称 和 样式属性值来组成的


2、属性名称 和 值 之间使用 : 连接


属性名:值


3、在一个style中允许有多个样式声明,多个样式声明之间使用 ; 来分割


<ANY style="属性1:值1;属性2:值2;">


常用属性 和 值:


1、文字大小


属性:font-size


取值:以 px 为单位的数字


ex:


<ANY style="font-size:16px">


2、文本颜色


属性:color


取值:表示颜色的英文单词


3、背景颜色


属性:background-color


取值:表示颜色的英文单词



2、内部样式表


1、作用


让定义好的样式能够适应当前页面中的多个元素


2、语法


<head>


<style>


样式规则1


样式规则2


... ...


样式规则n


</style>


</head>






样式规则语法:


由选择器 和 样式声明组成


选择器:规范了页面中哪些元素能够使用声明好的样式们






选择器{


属性1:值1;


属性2:值2;


... ...


}






ex:


div{


... ...


}






p{


... ...


}






h1{


... ...


}


3、外部样式表


1、作用


将声明好的样式应用在多个网页中






将样式规则声明在独立的css文件中(***.css)


在使用的网页上对 .css 文件进行引用


2、使用步骤


1、创建 .css 文件,并编写样式规则


2、引用 .css 文件


<head>


<link rel="stylesheet" href="css文件的url">


</head>


3、样式表的特征


1、继承性


大部分的css属性可以由父元素继承给子元素的


2、层叠性


允许为一个元素定义多种使用方式(内联,内部样式表,外部样式表)或多个样式规则,如果属性不冲突的话,那么所有的属性都可以应用到元素上


3、优先级


如果样式属性声明冲突的话,则按照不同的优先级来应用样式






浏览器缺省设置     : 低






内部或外部样式表   : 中


就近原则:后定义者优先






内联方式           : 高

1、样式表的使用方式


1、内联方式


<ANY style="样式属性:值;属性:值;">


2、内部样式表


<head>


<style>


样式规则


选择器{


样式声明;


样式声明;


}


</style>


</head>


3、外部样式表


1、将样式声明在独立的css文件中(.css)


结构与内部样式表一致


2、在使用的网页中引入 .css 文件


<link rel="stylesheet" href="css文件的url">






font-size:字体大小


color:文本颜色


background-color:背景颜色


===============================================


1、CSS选择器(重点)


1、选择器作用


规范了页面中哪些元素能够使用声明好的样式


目的:为了匹配页面中的元素


2、选择器详解


1、元素选择器


特点:由标记的名称来作为选择器,主要匹配页面中指定标记所对应的所有元素


语法:


标记{


样式声明;


}


ex:


p{ ... }


div{ ... }


h3{ ... }


... ...


2、类选择器


特点:允许被任意一个元素所引用的选择器


语法:


.类名{  ...  }


类名:


1、字母,数字,_,- 组成


2、数字不能开头


引用类选择器:


<ANY class="类名"> (此处不加 .)


练习:


1、创建一个01-selector-class.html文件


2、页面中创建几个元素(div,span,h3,p)


3、使用类选择器,设置以上所有标记的样式


1、文字大小:18px


2、文本颜色:黄色


3、背景颜色:红色





特殊用法:


1、分类选择器


允许将元素选择器和类选择器结合到一起使用,为了实现对某种元素不同样式的细分控制


语法:


元素选择器.类选择器{ ... }


ex:


.important{


类选择器,匹配页面中所有class为important的元素


}


div{


元素选择器,匹配页面中所有的 div


}






div.important{


分类选择器,匹配页面中所有class为important的div元素


}


练习:


在刚才的练习基础上


设置页面中所有的 class为bigFont的div标记,加粗效果(font-weight:bold;)


2、多类选择器


允许一个元素引用多个类选择器,类选择器的名称用 空格 隔开即可


<ANY class="c1 c2 c3">


练习:


增加一个类选择器 


.dec{


text-decoration:underline;


}





让页面中所有的元素增加对 dec 类选择器的引用


3、id选择器


在HTML中,每个元素都允许设置一个 id 属性,用来表示元素在页面中独一无二的标识






ID选择器作用:


为了匹配页面中指定ID值的元素


语法:#ID值{ ... }


ex:


#main{


/*匹配页面中id为main的元素的样式*/


}


4、群组选择器


1、作用


定义多个选择器们共有的样式


定义方式是一个以 , 隔开的选择器列表


2、语法


选择器1,选择器2,选择器3,...{


... ...


}






ex:


#main,span,p.important{


color:red;


}


等价于


#main{color:red;}


span{color:red;}


p.important{color:red;}


5、后代选择器


1、作用


依托于元素的后代关系来匹配某元素的后代元素(不限制层级)


2、语法


选择器1 选择器2{ ... }


ex:


1、div span{


匹配所有div 中的 所有的 span


}






2、#top .important{


匹配 id为top的元素中 class 为important 的所有后代


}


6、子代选择器


作用:依托于元素的子代关系(只有一层层级)来匹配元素


语法:选择器1>选择器2{ ... }


ex:


#top>.important{ 


匹配 id为top元素中直接子级class为important的元素


}


7、伪类选择器


1、作用


为了匹配元素的不同的状态的


2、语法


:伪类状态


通常会配合其他的选择器一起使用


元素选择器:伪类{}


#ID:伪类{}


... ...


1、链接伪类


1、:link


匹配超链接未被访问时的状态


2、:visited


匹配超链接被访问过的状态


2、动态伪类


1、:hover


匹配鼠标悬停在元素上时候的状态


2、:active


匹配元素被激活时的状态


3、:focus


匹配元素获取焦点时的状态


2、尺寸 与 边框


1、CSS单位


1、尺寸单位


2、颜色单位


1、rgb(r,g,b)


r : 红色范围值 0-255


g : 绿色范围值 0-255


b : 蓝色范围值 0-255






ex:


rgb(255,0,0) : 红色


rgb(0,255,0) : 绿色


rgb(255,255,255) : 白色


rgb(0,0,0) : 黑色


rgb(128,69,32) : ??


2、rgb(r%,g%,b%)


3、rgba(r,g,b,alpha)


alpha : 透明度 0-1之间的数字(小数)


0 :完全透明


1 :完全不透明


4、#rrggbb


由6位16进制的数字组成(0-9,A-F)


ex:


#ff0000 : 红色


#1a2b3c : ??


5、#rgb


#rrggbb的简写方式,当#rrggbb每两位数字相同时,可以使用 简写版


#112233 -> #123


#ff00aa -> #f0a


#f100aa -> 无简写方式


2、尺寸属性


1、作用


改变元素的宽度和高度


2、属性


width : 宽度,以px 或 % 为单位


ex:


width:500px;


width:0; width:0px;


height: 高度,以px 或 % 为单位






块级元素默认尺寸:


宽度:占父元素的100%


高度:以内容为准


行内元素默认尺寸:


宽度:以内容为准


高度:以内容为准


3、允许修改尺寸的元素


1、所有的块级元素都允许修改尺寸


2、行内块元素(表单控件)允许修改尺寸


3、table允许修改尺寸


4、除img以外的行内元素们,都不允许修改尺寸


4、溢出处理


1、什么是溢出


当使用尺寸属性限制元素尺寸时,如果内容所需空间大于元素尺寸时,将产生溢出的效果


2、溢出处理


属性:overflow


取值:


1、visible


默认值,可见的


2、hidden


溢出隐藏


3、scroll


显示滚动条,溢出时可用


4、auto


自动,溢出的方向产生滚动条


3、边框属性


1、边框的实现


1、简写方式


通过1个属性设置4个方向边框的所有效果(宽度,样式,颜色)


属性:border


取值:width style color


width:边框宽度,以px为单位


style:边框的样式


solid : 实线


dotted: 虚线(点)


dashed: 虚线(线)


color:颜色 或 transparent(透明)


特殊:


border:none; 取消所有边框的显示效果


2、单边定义


设置某一条边的宽度,样式,颜色


语法:


border-方向:width style color;


方向:top / bottom / left / right


ex:


1、上边框:1px宽度,实线,黑色


2、左边框:2px宽度,虚线,红色


3、单属性定义


设置四个方向边框的某一个属性值


属性:border-属性:值;


属性:width / style / color


ex:


1、设置四个方向的边框尺寸为5px


2、设置四个方向的边框颜色为蓝色


4、单边单属性设置


设置某一个方向的边框的某一个属性值


属性:border-方向-属性:值;


ex:


1、右边框的样式为 虚线(线)


2、下边框的颜色为 绿色


2、轮廓


outline:none; 取消轮廓


3、边框倒角


将四个直角变为圆角


属性:border-radius


取值:


1、以px为单位的数值


2、以%为单位的数值 - 50%


练习:


1、创建09-border-radius-exercise.html


2、创建一个div,尺寸 200*200,边框 ...


3、鼠标悬停时


1、将元素变为圆形的


2、背景颜色改为红色


3、框模型


1、什么是框模型


框:页面中所有元素皆为框


框模型:定义了元素的尺寸和距离的一种计算方式


Box Model,也称为 盒模型,方框属性


包含 :尺寸属性,边框属性,内边距属性,外边距属性





当框模型的属性介入到元素中的时候,那么元素的整体占地尺寸会发生变化






元素的实际宽度=左右外边距 + 左右边框 + 左右内边距 + width






元素的实际高度=上下外边距 + 上下边框 + 上下内边距 + height





2、外边距


1、什么是外边距


围绕在元素边缘之外的空白空间就是外边距


2、语法


1、属性


1、margin


最多控制4个方向的外边距值


2、margin-top


上外边距


3、margin-right


右外边距


4、margin-bottom


下外边距


5、margin-left


左外边距


2、取值


1、以 px 为单位的数值


2、以 %  为单位的数字


左右外边距占父元素宽度的占比数


上下外边距占父元素高度的占比数


3、取值为 负数


移动元素


为元素设置上外边距为正数,元素向下移动


为元素设置上外边距为负数,元素向上移动






为元素设置左外边距为正数,元素向右移动


为元素设置左外边距为负数,元素向左移动


4、auto


自动


注意:


1、只能用在左右外边距,上下无效


2、只能为设定宽度的块级元素设置左右外边距为auto - 让块级元素水平居中显示


3、margin间接写法


1、margin:value


value表示的是上下左右四个方向的外边距值


2、margin:v1 v2;


v1 : 上下外边距的值


v2 : 左右外边距的值


ex:


margin:0 auto;


3、margin:v1 v2 v3;


v1 : 上外边距


v2 : 左右外边距


v3 : 下外边距


ex:


margin:10px auto 5px;


4、margin:v1 v2 v3 v4;


v1 : 上外边距


v2 : 右外边距


v3 : 下外边距


v4 : 左外边距


3、页面中具备默认外边距的元素


body,p,h1~h6,ol,ul






将所有具备外边距的元素们的外边距都设置为0






body,p,h1,h2,h3,h4,h5,h6,ol,ul{


margin:0;


}


3、内边距


1、什么是内边距


内容与元素边框之间的距离


注意:内边距会扩大元素边框的所占区域


2、语法


属性:


padding :4个方向的内边距


padding-top / right / bottom / left:值;


取值:


1、以px为单位的数值


2、以% 为单位的数值


简洁写法:同margin


padding:value; 四个方向内边距


padding:v1 v2; 上下 左右


padding:v1 v2 v3;上  左右  下


padding:v1 v2 v3 v4;上  右  下  左


3、页面中具备默认内边距的元素


1、ol,ul :左内边距 40px


2、文本框,密码框


<div id="main">


<p>


<span>这是 p1中的 s1</span>


</p>


<span> 这是 main 中的 s2 </span>


</div>


1、页面中#main中的所有的span,文本变为红色,文字大小 24px


2、页面中 #main 直接子级的span 增加下划线


3、#main中,p中的span 设置为加粗的效果










  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值