端午小长假--前端基础学起来04CSS选择器

定义:

选择器{

  样式;

}

选择器指明{}中的样式的作用对象,即作用于网页中的哪些元素

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
body{
font-size:12px;
color:red;
}
</style>
</head>
<body>
<p>慕课网(IMOOC)是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你可以和朋友一起编程。</p>
</body>

  • 标签选择器:<html><body><h1><p><img>
  • 类选择器

语法:.类选择器名称{css样式代码};

注:1、英文圆点开头2、起名随意,不可中文

使用:

1、先用标签把要修饰的内容标记起来 如<span>天气晴朗</span>

2、使用class=“类选择器名称”为标签设置一个类,如:<span class="weather">天气晴朗</span>

3、设置类选择器css样式,如下:.stress{color:red;}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
.setGreen{
color:green;
}
</style>
</head>
<body>
<p>到了三年级下学期时,我们班上了一节<span class="setGreen">公开课</span>,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
</body>

  • ID选择器

语法:与类选择器的区别有两点:(1)使用id=“ID名称”来设置类(2)前面是#号

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#stress{
color:red;
}

</style>
</head>
<body>
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,

</body>

类选择器和ID选择器的区别:

(1)ID选择器在一个HTML文档中只能使用一次,而类可以使用多次

<p>今天<span class="stress">天气很好</span>,我们出去<span class="size">放风筝</span></p>

(2)可以使用类选择器为一个元素设置多个样式,ID选择器不可以,只能设置一个样式

.stress{

  color:red;

}

.size{

  font-size:25px;

}

<p>今天<span class="stress size">天气</span>特别好...</p>

  • ♦♦♦子选择器

语法:即>,用于选择指定标签元素的第一代子元素,例子:将class名为first的下的子元素li加入红色实线边框

<head>

<style type="text/css">

.first>li{border:1px solid red;}

</head>

<body>

<ul class="first">我喜欢吃

  <li>水果</li>

  <li>梨</li>

</ul>

<p class

</body>

  • 后代选择器

语法: 空格,用于选择指定标签元素下的后辈元素,没有搞懂和子选择器的区别(视频8-7)

  • 通用选择器

语法:*,匹配html中所有标签元素,*{color:red;},使用任意html标签的元素字体都将设置为红色

<head>

<style type="text/css">

*{color:red:}

</head>

伪类选择符

语法:允许给html中不存在的标签设置样式,比如给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;}

<head>

<style type="text/css">

a:hover{

  color:red;

  font-size:20px;

}

</head>

<body>

今天天气很好,在阳台上晒<a>太阳</a>

</body>

分组选择符

语法:为多个标签设置同一个样式,分组选择符是逗号,

这节的视频再看看,有点不懂,后几段

时间: 2024-12-20 11:10:04

端午小长假--前端基础学起来04CSS选择器的相关文章

端午小长假--前端基础学起来03CSS为网页添加样式

定义:用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体 设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span <head><style type="text/css">span{ color:red;}</style></head> <body> <p>慕课网,<span>超酷的互联网</span>.IT技术

端午小长假--前端基础学起来02与浏览器交互,表单标签

form  与用户进行交互,将浏览者的数据传到服务器端,相当于一个容器 语法:<form method = "传送方式"  action = "服务器文件"> 解释:method:数据传送的方式(get/post),action:浏览者输入的数据被传送到的地方,比如一个页面 文本/密码输入框 语法:<form> <input type="text" name="名称" value="文本

端午小长假--前端基础学起来01

HTML和CSS的关系 1)HTML是网页上面的文字.图片的载体 2)CSS是样式,文字的字体,颜色,边框 3)JavaScript是特效,弹出淡入 HTML标签 1)<h1></h1>是标题标签,<p></p>是段落标签,<img src="1.jpg">是图片标签 2)网页中每一部分的内容都要放在标签中才能显示 3)标签不分大小写,一般都是小写 HTML文件的结构 <HTML>根标签 < head>

零基础学UI小白锐变之路全能UI/UE设计师

课程简介:UI设计入学门槛较低,其所见即所得,大大增强了学习中的趣味性.而“互联网+”与O2O模式的大趋势,使之前景广阔超乎想象.行业内人才供不应求,设计人才缺口高达上千万,就业无忧.因人才的供不应求致使平均薪资水涨船高,最高的可达月薪30000+,可谓钱途无量.选择我,将您打造成会代码的全能设计师,领略前所未有的高薪体验. 学完后可选择从事4A广告公司平面设计工作,品牌形象设计工作及高端印前设计.电商美工.电商装修设计.网页设计.网页美工.网页制作.移动应用界面设计师.图形界面设计师.UI设计

零基础学Python,这是阿里Python8年开发经验写给你的学习路线图

今天给大家分享一位前辈整理的一个Python web学习路线.这位前辈由于有编程基础,所以采用了自学Python的方式.学完后主要做后端开发.希望对你有所启发. 整理的一个 python web 学习路线,这基本就是笔者自学后做后端的学习路线.创一个小群,供大家学习交流聊天如果有对学python方面有什么疑惑问题的,或者有什么想说的想聊的大家可以一起交流学习一起进步呀.也希望大家对学python能够持之以恒python爱好群,如果你想要学好python最好加入一个组织,这样大家学习的话就比较方便

零基础学python-2.17 文件、open()、file()

今天我们来说说文件,以及跟文件有关的内建函数open和file 首先我们在python的根目录下建一个名为"123"的txt文本文件 文件里面我们输入一些文本 我们把新建文件与源代码都放到python根目录下面 下面我们来看看代码: handler=open("123.txt")#由于把文件跟源代码建立在python的根目录, #所以这里的路径只需打名字即可 for eachLine in handler: print(eachLine,end='') handle

前端基础知识

1.了解web前端基础 (1) 网页介绍 组成: 文字,图片,按钮,输入框,视频等等元素组成的 (2)web标准 :制作网页的规范 a.结构标准(HTML) b.表现标准(CSS) c.行为标准(JavaScript) 2.浏览器 谷歌    内核 :blink IE(高版本) 内核:trident 苹果浏览器: 内核webkit 欧鹏  内核: Presto  现在用的是webkit 火狐  内核: gecko 3.HEML(Hyper Text markup Language) 超级文本标记

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少

零基础学python-4.3 对象的比较

这一章节我们聊聊对象的比较,我们分为两部分: 1.值的比较 从上图我们看见,一般值的比较都是使用==.>.<等操作符来实现的 除此之外,python还实现了多个比较操作符 2.对象本身的比较(引用的比较) python使用的是引用调用,而不是值调用,所以对比对象本身需要用到is这个关键字 上面就是一些对比的例子,但是我们从其中看见一些奇怪的现象,这就是我们所说的坑 例如:当两个对象是整形的时候,在较小的数字范围里面,python使用了缓存技术,所以才会出现a=1,b=1但是 a是b,理论上a不