请选择 进入手机版 | 继续访问电脑版

CSS笔记

[复制链接]
查看3444 | 回复0 | 2023-1-15 19:24:44 | 显示全部楼层 |阅读模式
内含项目demo和笔记,亲测可用,工程在附件链接里。
资源均来源于网络,仅供学习和参考使用,版权归原作者所有,勿作商业用途,请在下载后24小时之内自觉删除。
本站发布的内容若无意中侵犯到您的权益,请联系我们,本站将在看到后立即删除。
  1. 布局方式:
  2. 为什么需要先给整个网页布局?
  3. 没有布局的网页,是不美观的,是杂乱的。
  4. 有了布局,就相等于大楼有了主体结构,接下来就是给主体结构添砖加瓦,刷漆等。
  5. 这些后续工作在我们的网页中就是内容,图片文字等内容。
  6. 第一种方式:Table(基本不用)
  7. 第二种方式:DIV+CSS(项目中的常用方式)

  8. 什么是html元素?
  9. HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

  10. 什么是div?
  11. div是一个标签,叫做一个块标签,一个div就是一个块,单独占用一行,div可以用作容器,容纳其他html元素(可以包含其他标题,表格,图片等各种html元素)。
  12. 单独使用起来,没有其他的效果,需要通过css来控制。

  13. 示例(单独占一行)
  14. <div>我是一个好人!</div>

  15. 什么是span?
  16. span是一个标签,它是一个内联标签。
  17. 单独使用起来没有其他效果,需要通过css来控制样式。
  18. 当没有css控制span的样式的时候,span对标签里面的内容,没有任何效果影响。

  19. 示例:
  20. <span>SiKi学院是一个很牛B的网站!</span>没错!

  21. 什么是块级标签和内联标签(行内标签)?
  22. 块级标签占据一行,需要换行。
  23. div p ul ol h1~h6 hr form ...
  24. 行内标签:在一行内显示,不换行
  25. span b i font a textare img span input ...

  26. 标签嵌套规则:
  27. https://www.cnblogs.com/xiyangbaixue/p/4090511.html

  28. HTML
  29. 什么是css?
  30. w3cschool:http://www.w3school.com.cn/css/css_jianjie.asp

  31. HTML是基础,承载基本内容(图片,文本)
  32. CSS可以让网页更加美观!
  33. JavaScript可以让网页动起来,实现特效(动画,渐隐渐现等....)。

  34. 简述:CSS是用来控制样式的。
  35. 控制谁的样式?html里面的所有标签和标签里面内容的样式。
  36. 什么是样式?颜色,大小,位置...等视觉效果都是样式。
  37. 优点:解决内容与表现分离(.html   若干.css文件)
  38. 在学习开发期间,我们把css代码直接写在html文件里面,便捷

  39. 案例:
  40. p{
  41.         font-size:15px; /*这个是css注释*/
  42.         color:blue;
  43.         font-family:"幼圆";
  44. }
  45. div{
  46.         font-family:"隶书";
  47. }
  48. h1,h2,h3,p{
  49.         font-size:90px;
  50. }

  51. 书写css代码的三种方式
  52. 1,内部引入方式(直接在html页面上书写css代码)
  53.         <head>
  54.         放在head标签里面
  55.         <style type="text/css">
  56.         </style>
  57.         </head>
  58. 2,行内引入(只对某个标签有效,直接写属性样式,不需要写选择器)
  59.         <某个标签 style="font-size=20px;" ></结束标签>
  60. 3,外部引入(单独创建一个css文件)
  61.         <link rel="stylesheet" href="xxxx.css" type="text/css"/>
  62.         注意:可以引入多个

  63. CSS使用方法优先级
  64. 就近原则:距离html元素最近的css样式起作用。
  65. 行内 优先于 内部引入。
  66. 内部引入 和 外部引入 优先级由它的位置决定。

  67. css核心语法
  68. 选择器{
  69. 属性名1:属性值1;
  70. 属性名2:属性值2;
  71. 属性名3:属性值3;
  72. }

  73. 选择器
  74. 1,标签选择器
  75. 标签{}
  76. 2,类选择器(前面加上点)
  77. .类名{}
  78. 标签.类名{}
  79. 标签的类名通过class属性指定
  80. a,可以给多个标签指定同一个类名 class="xx"
  81. b,也可以给一个标签指定多个类,中间空格隔开    class="xxx xxx"
  82. 3,id选择器
  83. #id名{}
  84. 一般id名是不相同的,通过id属性指定某个标签的id,id就相当于我们每个人的身份证,是唯一的。
  85. 一个html元素只有一个id,不同元素的id是不相同的。

  86. 优先级 id选择器 > 类选择器 >标签选择器
  87. 其他时候 : 就近原则

  88. 注意:
  89. 一个标签可以既指定class也指定id。
  90. class和id的值是区分大小写的。

  91. 其他选择器
  92. 1,群组选择器
  93. 多个选择器应用同一组样式,多个选择器之间用逗号隔开。
  94. p,h1,h2,.c1,.c2,#id{}
  95. 2,全局选择器
  96. *{} 对所有html元素有效
  97. 3,后代选择器
  98. 标签1 标签2{}
  99. 选择器 标签2{}
  100. 控制标签1下面的标签2的样式。(对标签1下面的其他标签不影响)
  101. 4,属性选择器
  102. 标签名[属性名=‘属性值’]{}
  103. 控制标签相同属性相同的元素的样式。
  104. 5,伪类选择器
  105. 超链接有四种状态,不同状态下的样式怎么设置?
  106. a:link {color: #FF0000}                /* 未访问的链接 */
  107. a:visited {color: #00FF00}        /* 已访问的链接 */
  108. a:hover {color: #FF00FF}        /* 鼠标移动到链接上 */
  109. a:active {color: #0000FF}        /* 选定的链接(点击鼠标不松开) */
  110. 和CSS类搭配
  111. .red : visited {color: #FF0000}
  112. 注意1:
  113. link和visited时候超链接的伪类
  114. hover和active不止可以对超链接使用,别的html元素也可以
  115. 注意2:
  116. 超链接伪类顺序
  117. link visted hover active
  118. 其他伪类
  119. :first-child 伪类(选择元素的第一个子元素)

  120. 使用F12工具查看网页指定部分的代码

  121. CSS样式-----------------------------------------------------------------------

  122. 继承:
  123. 一般在子元素中没有设置的属性,会自动继承父元素里面设置的这个属性。

  124. 背景颜色和背景图片
  125. 背景包括 内边距和边框,不包括外边距。
  126. background-color:red;transparent
  127. background-image: url(路径);
  128. background-repeat: repeat-y; repeat repeat-x no-repeat
  129. background-position:center; top bottom left right center
  130. background-position:50px 100px;
  131. background-attachment:fixed; scroll //背景不会随着页面其余部分滚动。
  132. background http://www.w3school.com.cn/cssref/pr_background.asp

  133. 文本
  134. text-indent: 5em;缩进
  135. text-align:left; right center justify文本对齐
  136. 不止可以设置文本居中,还可以设置图片等其他内容,其他东西的对齐,使用别的方式
  137. word-spacing:10px; 字间隔(单词)
  138. letter-spacing:10px;字母间隔
  139. text-decoration:none;underline overline line-through blink 文本装饰
  140. line-height:20px; em 或者百分比

  141. 字体
  142. font-family:"楷体","幼圆","黑体";
  143. font-size:12px; 2em
  144. color:rgb(255,255,255);  #000000 red;
  145. font-style:normal;italic 斜体显示 oblique 倾斜显示(区别不明显)
  146. font-weight:normal; bold bolder lighter  100~900
  147. font-variant:small-caps; 小型大写字母
  148. 简写
  149. font:"楷体" 20px
  150. 书写顺序:http://www.w3school.com.cn/cssref/pr_font_font.asp

  151. 列表
  152. ul
  153. list-style-type:circle; none square http://www.w3school.com.cn/cssref/pr_list-style-type.asp
  154. ul li
  155. list-style-image:url(xxx.jpg);
  156. ul
  157. list-style-position:inside;

  158. ul {list-style : url(example.gif) square inside}


  159. css中的单位
  160. 第一种:px像素,显示大小收到显示器分辨率的影响。
  161. 第二种:相对大小em : https://www.w3cplus.com/css/px-to-em  
  162. em是相对大小1em就是相当于父元素大小的1倍。
  163. 浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

  164. 块级元素和行内元素
  165. display:linline block;

  166. 盒子模型-----------------------------------------------------------------------------

  167. 酒盒举例
  168. 对应网页中的盒子模型 http://www.w3school.com.cn/css/css_boxmodel.asp
  169. 盒子三要素:内边距,外边距和边框。(内边距和外边距也就是内填充和外填充)
  170. 内边距:padding        外边距:margin        边框:border
  171. 高宽指的是内容的高宽 width height

  172. 盒子宽度计算
  173. width+(padding+border+margin)*2

  174. css中的单位有哪些?
  175. http://www.w3school.com.cn/cssref/css_units.asp
  176. 常用px em

  177. 高宽
  178. width:90px;
  179. width:50%;相当于父元素的width来计算。
  180. height:90px;
  181. height:80%;


  182. 内边距
  183. padding: 10px;
  184. padding: 10px 0.25em 2ex 20%;上右下左

  185. padding-top: 10px;
  186. padding-right: 0.25em;
  187. padding-bottom: 2ex;
  188. padding-left: 20%;
  189. 注意:
  190. 百分比是相对于父元素的width来计算的。

  191. 外边距
  192. margin : 0.25in;
  193. margin : 10px 0px 15px 5px;上右下左
  194. margin : 10%; 按照父元素的width来计算百分比
  195. margin: 0.5em 1em; 值复制
  196. margin-left...
  197. margin:auto;左右居中

  198. 外边框 自动合并

  199. 边框
  200. border:5px solid red;
  201. border-top...

  202. border-style: outset;
  203. border-style: solid dotted dashed double; 上右下左
  204. border-right..-style
  205. border-style: none; 没有边框

  206. border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
  207. border-width: 15px 5px 15px 5px;
  208. border-width: 15px 5px; 值复制
  209. border-right..-width

  210. border-color: blue rgb(25%,35%,45%) #909090 red;
  211. border-right...-color
  212. border-color: transparent; 透明边框,有边框,只不过不可见

  213. border-radius 边框转角

  214. 案例练习:开发SiKi学院,单个课程展示界面

  215. ------------------------------------------------------CSS定位

  216. 一些皆为框
  217. div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

  218. CSS的几种定位机制
  219. 普通文档流
  220. 浮动
  221. 绝对定位、相对定位、固定定位

  222. 普通文档流
  223. 块级元素单独占一行,行内元素放在一行,从上到下排布。

  224. 框的position属性
  225. static 静态定位,自然定位。正常,默认属性。
  226. relative 相对定位,相对于自身原来的位置。原来的框还在文档流里面占有空间。
  227. absolute 绝对定位,相对于父元素,自身会脱离文档流。
  228. fixed 固定定位,相对于浏览器的窗口来说的。
  229. 不会随着浏览器滚动而滚动

  230. top bottom right left
  231. z-index 堆叠顺序

  232. 相对定位,绝对定位和固定定位的区别:
  233. https://www.cnblogs.com/gchlcc/p/6295199.html

  234. 块元素是独占一行的。

  235. 浮动
  236. 浮动的框可以向左或者向右移,直到它的外边缘碰到包含框或者另一个浮动框的边框为止。
  237. http://www.w3school.com.cn/css/css_positioning_floating.asp
  238. 文章中有六个例子。
  239. float:left right none

  240. 使用浮动可以让多个div在同一行
  241. 实现SiKi学院上的课程列表

  242. 清除浮动
  243. 属性 clear:left right both
  244. 作用 清除浮动对自身的影响

  245. 方法一:一般会添加一个空的div,来清除上面所有的浮动,避免对接下来的代码产生影响。
  246. 方法二:设置固定高度
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

5

主题

5

帖子

115

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
115