求职之路复习篇_Css

1.Css的简介:

*css: 层叠样式表

**层叠:一层一层
样式表:很多的属性和属性值
*是页面显示效果更加好
*Css将网页的内容和和显示样式进行分离,提高了显示功能。

2.Css和html的结合方式(四种):

1.在每个html标签上面都有一个属性style

<div style="background-color : red ;color : green;">求职之路复习篇-Css样式</div>

2.使用html的一个标签实现<style>标签,写在head里面

<style type="text/css">
div{
background-color : red ;
color : green;
}
..........
<div>求职之路复习篇-Css样式</div>

3.在style标签里面,使用语句。

@import url(jianshu.css);

缺点:某些浏览器下不起作用。
4.推荐:使用头标签link,引入外部css文件

<link rel="stylesheet" type="text/css" href="jianshu.css">

3.Css的优先级

1.从上到下,由内而外。优先级由低到高。
2.后加载的优先级高
编码规范:
1.选择器名称{属性名:属性值 ;属性名:属性值1 属性值2......}

  • 属性和属性之间用分号
  • 属性和属性值之间用冒号
  • 属性值和属性值之间用空格

4.Css选择器:需要对哪个标签里面的数据进行操作

1.标签选择器

<style type="text/css">
div{
background-color : red ;
color : green;
}
p{
background-color : white ;
}
..........
<div>求职之路复习篇-Css样式</div>
<p>求职之路复习篇-Css选择器</p>

2.class选择器:每个html标签都有一个属性class

<style type="text/css">
p.jianshu{
background-color : white ;
}
..........
<p class="jianshu">求职之路复习篇-Css选择器</p>

3.id选择器:每个html标签上面都有一个属性id

<style type="text/css">
p#jianshu{
background-color : white ;
}
..........
<p id="jianshu">求职之路复习篇-Css选择器</p>

5.Css选择器的优先级:style>id选择器>class选择器>标签选择器

6.Css的扩展选择器

1.关联选择器:div空格p
注:需求:设置div标签里面p标签的样式,嵌套标签里面的样式

<style type="text/css">
div p{
background-color : white ;
}
..........
<div><p>求职之路复习篇-Css选择器1</p></div>
<p>求职之路复习篇-Css选择器2</p>

2.组合选择器
注:需求:把div和p标签设置成相同的样式,把不同的标签设置相同的样式

div,p{
background-color : orange ;
}
..........
<div>求职之路复习篇-Css选择器1</div>
<p>求职之路复习篇-Css选择器2</p>

3.伪元素选择器:css里面提供了一些定义好的样式,可以拿来使用
注:超链接
原始状态 鼠标放上状态 点击状态 点击后状态
:link :hover :active :visited

<style type="text/css">
a:link{
background-color : white ;
}
a:hover{
background-color : red ;
}
.......
<a href=“www.tj-kingdee.com”>求职之路复习篇-Css选择器1<a>

后续持续更新......

不正经的程序员

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,845评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,661评论 32 459
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,676评论 0 30
  • 版本记录 前言 KVO具有更强大的功能,是苹果给我们的一个回调机制,在某个对象注册监听者后,在被监听的对象发生改变...
    刀客传奇阅读 518评论 0 0
  • 参考文章 学习Golang之后对golang中的版本管理,包管理等机制一直没有很好的琢磨,偶然想起还是觉得很有必要...
    liujb阅读 2,538评论 0 4