【初入前端】第三课课前预习

文章目录

一、css高级选择器
- 1.后代选择器
- 2.子选择器
- 3.并集选择器
二、伪类选择器
- 1.链接伪类选择器
- 2.focus伪类选择器
- 3.总结
三、盒子模型
- 1.边框 border
- 2.内边距 padding
- 3.外边距 margin
四、背景、阴影、圆角边框
- 1.背景 bcakground
- 2.阴影 box-shadow、text-shadow
- 3.圆角边框 border-radius

一、css高级选择器

1.后代选择器

后代选择器又称为包含选择器，其语法如下（表示选择元素1里面的所有元素2）：
元素1 元素2 { 样式声明 }

<style>ol li { color:pink; }ol li a { color:red;}
</style>

中间用空格隔开；
最终是元素2使用该样式；
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；
元素1和元素2可以是任意基础选择器。

2.子选择器

子选择器只能选择某元素的最近一级子元素，简单理解就是选择亲儿子元素。其语法如下：
元素1 > 元素2 { 样式声明 }

<style>.son>a {color:pink;} /类选择器
</style>

中间用 “>” 隔开；
最终是元素2使用该样式；
元素2必须是亲儿子，其孙子辈的都不归他管。

3.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。其语法如下：
元素1，元素2 { 样式声明 }

<style>div,p,.and { color:pink; }
</style>

中间用 “，” 隔开，可以理解为和的意思；
并集选择器通常用于集体声明。

二、伪类选择器

1.链接伪类选择器

a:link 选择所有未被访问的链接；
a:visited 选择所有已被访问的链接；
a:hover 选择鼠标指针位于其上的链接；（常用）
a:active 选择活动链接；

<style>a { color: black; }     <--原：黑色-->a:hover { color:pink; } <--鼠标位于其上：粉色-->
</style>

2.focus伪类选择器

focus伪类选择器用于获取焦点的表单元素；
一般情况，<input>类表单元素才能获取光标，此选择器主要针对表单元素来表示。
其语法如下：

input:focus {background-color:yellow; /点击文本框等即变为黄色
}

3.总结

复合选择器总结如下：

三、盒子模型

1.边框 border

-width: px; --设置边框宽度
-style: none /dotted（点）/dashed（虚线）/solid（实线）; --设置边框线条类型
-color: pink; --设置边框宽度
-collapse:collapse; --设置细线
复合写法： border :1px solid pink;
分开写法： border-top :1px solid pink; border-bottom :1px solid pink;

2.内边距 padding

-top / -bottom / -left / -right 设置不同方位的内边距
复合写法：

 .box{padding:5px; <--上下左右都是5px-->padding:5px 10px; <--上下5px,左右10px-->padding:5px 10px 20px; <--上5px,左右10px,下20px-->padding:5px 10px 20px 30px; <--上下左右-->}

3.外边距 margin

-top / -bottom / -left / -right 设置不同方位的内边距；
复合写法与外边距padding相同；
设置外边距可以让块级盒子居中：width:20px; margin:0 auto;
让行内元素或行内块元素居中，给其父元素添加 text-align:center即可。

四、背景、阴影、圆角边框

1.背景 bcakground

背景颜色-color:pink;
背景图片-image:url (#)；
背景平铺-repeat : repeat、no-repeat、repeat-x、repeat-y;
背景方位-position：x y ; （可填写top、center、bottom、left、right等方位，也可以填写具体方位如20px）
背景固定 -attachment：scroll（默认，滚动）、fixed（固定）；
背景透明度：background：rgba（0，0，0，a）
复合写法：

<style>.box {background: pink url(#) no-repeat fixed center top; }<--顺序为：颜色、地址、平铺、滚动、位置-->
</style>

2.阴影 box-shadow、text-shadow

盒子阴影 box-shadow：

css3中新增了盒子阴影，我们使用box-shadow属性为盒子增加阴影。
语法：box-shadow: h-shawow v-shadow blur spread color inset;

文字阴影 text-shadow

在css3中，我们可以使用text-shadow属性将阴影应用于文本。
语法：text-shadow: h-sahdow v-shadow blur color ;

3.圆角边框 border-radius

设置圆角边框格式：border-radius: px ;
代码示例：

.round {width:20px;height:20px;border-radius:50px; <--圆形--><--圆角矩形：border-radius后的数据为height的一半-->

感谢您的浏览！

【初入前端】第三课课前预习相关推荐

【初入前端】第四课课前预习
文章目录一.浮动(float) 1.什么是浮动 2.浮动的特性 3.与标准流父级搭配使用 4.清除浮动二.定位 1.引入 2.定位组成 3.叠放次序 4.拓展 5.元素的显示与隐藏三.过渡四. ...
初入前端，面对一个项目应注意哪些？
前言: 对于初入职场的前端小白来说,一整个项目来了,顿时感觉压力山大,张皇失措,也总会感到手忙脚乱.其实不用怕,拆分步骤,把每个步骤做好,做细,一切都迎刃而解,犹如顺藤摸瓜般畅快淋漓. 目录: 概念的 ...
初入前端框架bootstrap--Web前端
Bootstraps是一种简洁.直观.强悍的前端开发框架,它让web开发更迅速.简单.对于初入Bootstrap的小白,高效进入主题很重要,能为我们节省很多时间,下面我将对使用Bootstrap开发前 ...
【初入前端】第一课课前预习
目录一.HTML.CSS.JS 简介 HTML CSS JS 二.HTML常用标签文件标签链接标签图像标签表格标签列表标签表单标签其他标签一.HTML.CSS.JS简介 1.HTML ...
初入c++（三）this指针，友元函数，友元类
1.c++中的this指针指向当前对象,通过它可以访问当前对象的所有成员.当前对象就是正在使用的对象: 在类的内部使用,可以访问所有的成员,public,private,protect this只能 ...
初入前端项目实训-音乐之家
主要内容:介绍html和css,使用html和css实现一个简单的音乐播放网页,后面有源码: 工具:Dreamweaver 说明:自己在学习的过程的一些记录,和大家一起分享,若有错误之处和不当之处还望 ...
每一个div元素分析 php,PHP初入，div知识点整理（特效字体等元素的使用整理）...
.nav{ width: 500px; height: 100px; border: 2px solid black; background-image: url(js/QQ图片20170815095 ...
前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
《程序员羊皮卷》第三章初入职场第一年
万分重视自己的第一份工作根据某杂志在2009年6月的统计,54.7%的父母要求孩子读到博士,83.6%要求孩子考试得分在前15名.母亲对孩子说得最多的一句话是"好好学习".其次多 ...

【初入前端】第三课课前预习

文章目录

一、css高级选择器

1.后代选择器

2.子选择器

3.并集选择器

二、伪类选择器

1.链接伪类选择器

2.focus伪类选择器

3.总结

三、盒子模型

1.边框 border

2.内边距 padding

3.外边距 margin

四、背景、阴影、圆角边框

1.背景 bcakground

2.阴影 box-shadow、text-shadow

3.圆角边框 border-radius

【初入前端】第三课课前预习相关推荐

最新文章

热门文章

【初入前端】第三课 课前预习

文章目录

一、css高级选择器

1.后代选择器

2.子选择器

3.并集选择器

二、伪类选择器

1.链接伪类选择器

2.focus伪类选择器

3.总结

三、盒子模型

1.边框 border

2.内边距 padding

3.外边距 margin

四、背景、阴影、圆角边框

1.背景 bcakground

2.阴影 box-shadow、text-shadow

3.圆角边框 border-radius

【初入前端】第三课 课前预习相关推荐

最新文章

热门文章

【初入前端】第三课课前预习

【初入前端】第三课课前预习相关推荐