CSS入门基础

CSS基础知识总结

CSS:Cascading Style sheets,级联/层叠样式表

  • 用于定义如何显示HTML元素

  • 通常保存在外部.css文件中,编辑此文件就能改变页面整体外观

一、CSS基本语法

CSS语句主要由两个部分构成:选择器以及一条或多条声明

h1//选择器{color:blue;font-size:12px;}//s声明

  • 选择器:用于指定要改变的html元素

  • 声明由属性和值组成

  • 每个声明都以;结束并且声明整体由{}包裹

  • 在HTML文档中,样式可定义在<style>标签中
    对于分离的css文件,通过head标签中引入link实现:
    <link rel="stylesheet" type=""text/css href="资源路径"/>

二、CSS选择器

<body>
    <p id=p1 class="aa xixi">哈</p>
    <p id=p2 target="bb">哈哈</p>
    <p id=p3>哈哈哈</p>
<body>
  • 标签选择器:p{color:red;} //选择多个标签时中间用隔开

  • id选择器:#p1{color:red;} //id不可以数字开头且不能包含下划线以外符号

  • 类选择器:.aa{color:red;} //只要类名中包含选择器中的字符即为选中

  • 属性选择器:[target]{color:red;} //包含target属性的标签

  • 后代选择器:body p{color:red;} //body的后代p

  • 更多方式参考:https://www.runoob.com/cssref/css-selectors.html

三、CSS伪类

用于添加一些选择器的特殊效果

语法:selector:pseudo-class {property:value;}

如:p:hover{color:blue}//当鼠标悬浮在p元素上时元素变为蓝色

更多伪类参考:https://www.runoob.com/css/css-pseudo-classes.html

posted @ 2021-03-12 17:06  silentor  阅读(41)  评论(0编辑  收藏  举报