博客列表 >css的引入和选择器

css的引入和选择器

徐涛的博客
徐涛的博客原创
2018年08月13日 17:48:09697浏览

主要是对css的选择器的使用,怎么对元素添加样式

实例

<!DOCTYPE html><!-- 文档的类型 有xml, xhtml,html -->

<html>

<head>

<title>php中文网</title><!-- 定义网页的头部 标题 -->

<meta charset="utf-8"><!-- 页面字符集 -->

<!-- css样式的引入方式有三种 1.外部样式 在文档外部定义 通过link 引入 2.内联样式 元素内部定义 3.内部样式 style标签内定义 

他们的优先级是 外部样式表 < 内部样式表 < 内联样式 -->

<style type="text/css">

a[href="www.php.cn"] {color: red} /*属性选择器*/



#index{color: yellow} /*id 选择器*/



div a{color: green} /*标签选择器的 派生选择器*/



.box{color: pink} /*类选择器*/

</style>

<!-- css选择器的优先级 id>class>标签 -->

</head>

<body>

<a href="http://www.php.cn">php中文网</a>

<a href="http://www.nowcoder.com" id="index">牛客网首页</a>

<div><a href="http://www.baidu.com">百度</a></div>

<div class="box"></div>

</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例屏幕快照 2018-08-13 下午5.47.30.png

现在对这次所学的知识进行总结:

1.css引入方式有三种 :外部样式,内部样式,内联样式

他们的优先级是  内联 > 内部 > 外部。

2.css选择器主要有三种 :类选择器 ,ID选择器, 标签选择器

a. 类选择器 就是通过元素的class属性添加样式

b. ID选择器 就是 通过元素的ID属性添加样式

c.标签选择器 就是通过标签及元素的名字来添加样式,

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议