主讲四天htmlcss课件五天.pptx

主讲：李静

邮箱：轻松学习html+css

第五天：css核心基础

在HTML中引入CSS的方法1.行内式 行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现出CSS的优势，因此不推荐使用。 例如： h1style=“color:white;background-color:blue”这是一行文本/h1

在HTML中引入CSS的方法2.嵌入式 嵌入式将对页面中各种元素的设置写在head/head之间。 例如： styletype=text/css h1{ color:white; background-color:blue } /style

在HTML中引入CSS的方法3.导入式styletype=text/css @importmystyle.css;/style

在HTML中引入CSS的方法4.链接式linkhref=mystyle.cssrel=stylesheettype=text/css/

基本CSS选择器1.标记选择器例如:styleh1{color:red;font-size:25px;}/style

基本CSS选择器2.类别选择器

基本CSS选择器3.ID选择器

复合CSS选择器1.“交集”选择器

复合CSS选择器2.“并集”选择器

复合CSS选择器3.“后代”选择器

复合CSS选择器“交集”选择器div.top{……}Div#top{……}“并集”选择器Div,h1.first.p.top{……}后代选择器Divh1.firstspan.firstLetter{……}

CSS继承性

CSS层叠性行内样式ID样式类别样式标记样式p这是第1行文本/ppclass=“red”这是第2行文本/ppid=“line3”class=“red”这是第3行文本/ppstyle=“color:blue;”id=“line3”这是第4行文本/ppclass=“red”这是第5行文本/p

链接四种状态a:link链接a:visited访问后a:hover鼠标经过a:active鼠标点击时

实例百度搜索结果页

实例搜狐教育频道内容页

谢谢大家！