css基础语法笔记

     CSS的概述

      层叠样式表(cascading style sheets),和html类似也不是真正的编程语言,甚至不是标记语言。它是一门样式表语言,这也就是说,人们可以用它来选择性的为HTML元素添加样式。它的作用:定义如何显示HTML元素,HTML是一栋房子的话,CSS就是对房子的装修。

css规则构成:选择器 { 属性名:属性值;}  例如 P { color:red;}选择器最常见的是需要改变样式的元素名。“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。常用的选择器有:元素选择器,ID选择器,类选择器(CLSS),选择器分组(并集选择器),通配选择器,复合选择器(交集选择器)。

元素选择器

语法:标签名{}        举个栗子:p{ color:pink;}

id选择器 

语法:#id属性值{}     作用:通过元素的id值选中唯一的元素。    举个栗子:#p1{ color:pink}      这里代表id为p1的元素的设置它的颜色为粉红色。  注意:一个HTML中id不允许重复 这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为“p1”,那么在同一页面你就不能再将其他元素id取名为”p1”了。我们在页面上定义一个元素把它的id定为p1,如<div id="p1">

类选择器

语法:.class属性值{}  作用:通过元素的class属性值选中一组元素。class属性值和id属性值相似,只不过class属性值可以重复。 举个栗子:.p2{ color:pink;}

并集选择器

语法:选择器1,选择器2,选择器n{}      作用:可以选中多个 选择器对应的元素    举个栗子:#p1,.p2,h1{background-color:pink;}

通配选择器

语法:  *{}    作用:选中页面中所有的元素。 举个栗子: *{ color:pink;}

交集选择器

语法:     选择器1选择器2选择器n{}     作用:可以选中同时满足多个选择器的元素。举个栗子:span.p1{ color:pink;}

HTML标签

超链接a标签<a  herf="网址"> 文字或图片</a>

链接到本站点其他网页<a herf="news.html">新闻</a>

链接到其他站点<a herf="http://ww.baidu.com">百度</a>

虚拟超链接<a herf="#"></a>

插入图像img标签

网页中常见的图像格式:JPG,GIF,PNG

举个栗子:<img src="w3school.gif" alt="w3c" /> 

src属性:路径+文件名


绝对路径:以根目录为基准

例子:<img src="C/sise/logo.jpg"/>

相对路径:以该文档所在位置为基准

例子:<img src="logo.jpg"/>


无序列表<ul>  列表项<li>

有序列表<ol>列表项<li>

表格 table tr(行) td(列)

<table>

    <tr>

        <td></td>

        <td></td>

        <td></td> 

    </tr>

    <tr>

        <td></td>

        <td></td>

        <td></td>

    </tr>

</table>


table>tr*2>td*3


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容