CSS---网络编程

谙忆 2021-01-21 12:55:12
编程 网络 css css---


CSS概述

CSS是层叠样式表(Cascading Style Sheets)用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。 那么CSS和HTML是如何在网页代码中相结合的呢?通过四种方式:style属性 、style标签、导入和链接。

CSS与HTML相结合的四种方式

* 1、style属性方式 这种方式很少用,因为还是和HTML差不多。 一般用后面3种。

<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>

* 2、style标签方式

<style type=”text/css”>
p { color:#FF0000;}
</style>

* 3、导入方式

<style type="text/css">
@import url(myDiv.css)
</style>

* 4、链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" /> 

相关语法

*样式优先级

由上到下,由外到内。优先级由低到高。——总之,一般情况是以后加载为主,但还有细节优先级问题(后面会讲到)。

*CSS代码格式

选择器名称 { 属性名:属性值;属性名:属性值;…….}

属性与属性之间用 分号 隔开 属性与属性值直接按用 冒号 连接 如果一个属性有多个值的话,那么多个值用 空格 隔开。

选择器

就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器(标签本身就是封装数据的容器)。

*选择器共有三种:

1) html标签名选择器。使用的就是html的标签名。 (也就是直接用html中的标签) 2) class选择器。其实使用的是标签中的class属性。 (前面加:# ) 3) id选择器。其实使用的是标签的中的id属性。 (前面加:. )

每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。 在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。

*选择器的优先级 标签名选择器 < class选择器 < id选择器 < style属性

扩展选择器

*关联选择器

标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。例如:

p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>湖南城市学院</b>段落样式</p>
<p>P标签段落</p> 

设置P标签。 设置P标签中的b标签。

*组合选择器

对多个选择器进行相同样式的定义。例如,我们想对“div中的标签”和“类名为cc”的区域设置相同的样式,则可以定义如下的组合选择器:

.cc, div b{/*不同选择器之间用逗号分开*/
background-color:#0000ff;
color:#fff;
} 

设置id=”cc”的标签和div标签下的b标签。

*伪元素选择器

其实就在html中预先定义好的一些选择器,称为伪元素。

格式:标签名:伪元素。类名 标签名。类名:伪元素。

超链接a标签中的伪元素:

a:link 超链接未点击状态。 a:visited 被访问后的状态。 a:hover 光标移到超链接上的状态(未点击)。 a:active 点击超链接时的状态。

段落p标签中的伪元素: p:first-line 段落的第一行文本。 p:first-letter 段落中的第一个字母。

自定义伪元素:

:focus 具有焦点的元素(其实有点类似点击后的监听)

div:hover{
background-color:#f00;
color:#fff;
}

CSS的盒子模型

◇边框(border) 上 border-top 下 border-bottom 左 border-left 右 border-right

◇内补丁(Paddings):内边距 上 padding-top 下 padding-bottom 左 padding-left 右 padding-right

◇外补丁(Margins):外边距 上 margin-top 下 margin-bottom 左 margin-left 右 margin-right

边框(border)—这个元素内容的封闭图形的边界 内补丁(Paddings):内边距—自己这个元素边界距离自己内容文字的距离 外补丁(Margins):外边距—自己这个元素的边界距离另一个元素的边界(边框)的距离

*CSS布局——漂浮

◇ float : none | left | right none : 默认值。对象不飘浮 left : 文本流向对象的右边 (本对象流向左边) right : 文本流向对象的左边 (本对象流向右边)

◇ clear : none | left | right | both none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象

(如果不允许浮动对象,且正好有一个对象漂浮过来,需要占这个对象一行位置,则这个对象移动,给那个漂浮过来的对象让出一行位置,让他们不会重叠)

*CSS布局——定位 ◇ position : static | absolute | fixed | relative static : 默认值。无特殊定位,对象遵循HTML定位规则。 absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义。 fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。 relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置。

absolute —绝对定位。 如果某个对象用了绝对定位,其实就相当于这个对象漂浮在另一个层面(重叠),而原来层面上自己占的位置被其他模块覆盖。

relative —相对定位。 如果某个对象用了相对定位,也相当于这个对象漂浮在另一个层面(重叠),但是原来层面上自己占的位置不会被其他模块覆盖。

*CSS布局——图文混排 *CSS布局——图像签名 (这2个方式的实现其实就是用了盒子模型,绝对定位或相对定位来实现的)

CSS还有很多知识点,可以多写写,看看API就熟悉了,基本语法也就这么多~~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

版权声明
本文为[谙忆]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1777188

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云