前端知识点之CSS(二)

CSS选择器,这里分别以标签选择器、id选择器、class选择器、关联选择器,组合选择器、属性选择器

①标签选择器

示例代码:

运行结果:

②id选择器

id选择器以为#开头,而且选择器的ID不能重复,即每次调用一个选择器,而不能在一个html中多次调用一个

示例代码:

运行结果如下:

③class选择器(或类选择器)

以一个小点开头(.),命令为.c1、.c2、.net等

示例代码:

输出的效果:

④关联标签,如果要对某个html页面里面的同样的标签设置一个共同的属性,可以使用关联标签

显示效果:

关关联标签可以在预设值的标签的外围标签上引用一个定义好的样式,然后通过指定哪些标签使用该样式来实现目标标签的样式设置,这里的外围标签为div,目标标签为li,预定义的样式为.container,li是要使用的样式,即.container下的所有li标签使用“background-color: red;”样式。

平时在使用的时候四种选择器用的最多的就是类选择器和关联选择器,所以对于标签选择器和id选择器用的相对较少,重点放在后面两种选择器上。

⑤组合选择器

⑥属性选择器

当一个html文件中同一个类型的标签有多重类型。比如如下多个input标签,但是只对text类型的input标签使用某种样式,则可以通过属性选择器来指定具体的类型标签

示例代码:

显示效果:

时间: 2024-08-10 19:19:11

前端知识点之CSS(二)的相关文章

重修课程day48(前端三之css二)

一 伪类选择器 伪类选择器就是在查找的后面加上冒号和状态 hover:悬浮到上面就会变化一种状态 link:没有接触的状态 active:点击是触发的状态 visited:点击后的状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{

软件测试必备-前端知识点之css基础及ps的用法

CSS 一. css定义 css样式表.层叠样式表,级联样式表 二. css基础语法 1. 写style标签,放在head标签里面的最后位置 2. 自己写的css代码,放在style标签里面 三. css常用属性 1.color: red;   设置文字颜色 2.font-size: 50px; 设置文字大小 3.font-family: "黑体"; 设置字体(如果设置的是中文字体,要加双引号!) 4.width: 100px;  设置宽度 5.height: 100px;  设置高度

前端知识点之CSS(一)

CSS的解释: CSS是英文 Cascading Style Sheets的缩写,称为层叠样式表.用于对页面美化,CSS可以是页面更加美观.基本上所有的html页面或多或少的使用CSS. CSS在使用方式上有三种:元素内嵌.页面嵌入.和外部导入 语法:style='key1:value1;key2:value2;' 在标签中使用style='xx:xx;' 在页面嵌入中使用:<style type=text/css></style>#在html头部指定CSS样式 引入外部CSS文件

前端学习之css二

首先我们说一下各种属性: 1.水平对齐方式属性: left:把文本排列在左边.默认值:由浏览器决定 right:把文本排列在右边 center:把文本排在中间  justify:实现两端对齐文本效果 2.用于调图标的属性 font family:调节字体  font weight:调节粗细  font size:调节字体大小 lighter/bold/border/  text indent:首行缩进   font-stye:italic 文字样式   lettrt-spacing:字母间距  

前端知识点之CSS(三)

①background-position 图片位移 应用场景,在实际的生产环境中咱们在网页上看到的小图片不是一个一个的零散的小图片的,咱们只是看到了大图片的一部分.比如一个大图片,我只让他显示一部分并不全部显示怎么做? 可以这么想: 有一个窗口,你在窗口的一边,只能通过窗口来看外面,你不能动,我们可以通过移动这个窗口来让你看到不同的场景,当然你看到的大小和窗口的大小有关! 代码如下: <!DOCTYPE html> <html lang="en"> <he

前端知识点总结1

前端知识点总结 WendySays 关注 2016.10.14 17:10* 字数 1074 阅读 759评论 3喜欢 8 知识框架 知识框架图,每个部分有很多书推荐https://github.com/JacksonTian/fks Paste_Image.png 浏览器工作原理 How browsers work 浏览器工作原理相关的译文 浏览器渲染浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻

前端学习(十二):CSS排版

进击のpython 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中,我们会用到word来编写内容,比如可以对我们需要设置的内容设置字体.字号.颜色等设置 那么我们在网页中使用css样式时,同样也能做相关的设置 那我们可以试着为网页中的文字设置字体为微软雅黑 body{font-family:'微软雅黑'} 这里要注意不要设置不常用的字体,比如你给我来个'菲律宾体' 因为如果用

前端知识点总结(CSS篇)

圣杯布局 CSS合并方法 盒子模型 CSS定位 CSS动画原理 CSS3动画(简单动画的实现,如旋转等) CSS不同选择器的权重(CSS层叠的规则) flexbox布局 块级元素和行内元素的异同 CSS在性能优化方面的实践(比方说选择器的效率等) CSS打包压缩的方法 使用CSS预处理的优缺点(比方说Sass和Compass等) { box-sizing: border-box; }这条CSS规则是干嘛的,有什么优点 CSS浮动的原理及清除浮动的方法及优缺点 CSS垂直居中的方法 base64的

前端知识点总结(转载)

转自--- https://github.com/hawx1993/Front-end-Interview-questions/blob/master/README.md 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/trigkit4) 收集整理. 一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五