一、CSS层叠样式表介绍

1.什么是CSS？

CSS指层叠样式表(Cascading style Sheets)
样式定义如何显示控制HTML元素,从而实现美化HTML网页。
样式通常存储在样式表中，目的也是为了解决内容与表现分离的问题
外部样式表(CSS文件)可以极大提高工作效率
多个样式定义可层叠为一，后者可以覆盖前者样式

2.CSS的语法

格式:选择器{属性:值;属性:值;属性:值;.…….}

案例如下:其中选择器也叫选择符
P{ color:red; text-align:center; }

3.CSS中的注释

格式：/*...*/

4.在HTML中如何使用CSS样式

共计有三种方式:
(1).内联方式(行内样式)

(2).内部方式(内嵌样式)

(3).外部导入方式（外部链入)

优先级:

*当样式冲突时,就采用就近原则，是值css属性离被修饰的内容最近的为主。
*若没有样式冲突则采用叠加效果。

二、CSS常用选择器

1.常用兼容选择器

html选择符(标签选择器)
class类选择符(使用点.将自定义名(类名)来定义的选择符)
ld选择符:
关联选择符(包含选择符)
组合选择符(选择符组)
伪类选(伪元素)择符:

（1）html选择器

使用html标签的名字作为选择器。

（2）类选择器

定义：.类名

对class 进行属性的设置，.cc是指所有class=”cc“的都设置为红色；而li.cc更加的缩小了范围，只是指li标签中class="cc"的属性。

值得注意的是后面又设置了li.dd的颜色是蓝色，因为就近原则（是指距离标签最近的css的设置，也就是后面设置的），所以第四行本来是红色现在要改为蓝色。

（3）id选择器

定义：#id名

这里需要注意选择符的优先级。

（4）关联选择符（包含选择符)

格式:选择符1选择符2I选择符3 ...{样式....}
table a{... .}/*table标签里的a标签才采用此样式*/

h1 p{color:red}/*只有h1标签中的p标签才采用此样式*/

例：ol li{color:green}

（5）组合选择符（(选择符组)

格式:选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;}/*h3、h4和h5都采用此样式*/

(6).伪类选(伪元素)择符:

格式:标签名:伪类名{样式....}
a: link {color: #FF0000; text-decoration: none}        /*未访间的链接*/
a:visited {color: #00FF00; text-decoration: none}        /*已访间的链接*/
a : hover {color: #FF0OFF ; text-decoration: underline}        /*鼠标在链接上*/
a:active {color: #0000FF ; text-decoration: underline}        /*激活链接*/

2.其他选择器

关系选择器:
属性选择器
结构性伪类选择器:
状态伪类选择器
其他伪类选择器

（1）关系选择器

div>p 选择所有作为div元素的子元素
pdiv+p选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p

（2）属性选择器:

[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表,其中一个等于value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素

[attribute*=value]匹配具有attribute属性、且值中含有value的E元素

（3）结构性伪类选择器:

: :first-letter设置对象内的第一个字符的样式。

::first-line设置对象内的第一行的样式。

: before设置在对象前（依据对象树的逻辑结构）发生的内容。

:after设置在对象店（依据对象树的逻辑结构）发生的内容。

:lang(language)匹配使用特殊语言的E元素。

:element1~element2:
:first-of-type匹配同类型中的第一个同级兄弟元素

:last-of-type匹配同类型中的最后一个同级兄弟元素

:only-of-type匹配同类型中的唯一的一个同级兄弟元素

:only-child匹配父元素仅有的一个子元素

*:nth-child(n)匹配父元素的第n个子元素

:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素

*:first-child匹配父元素的第一个子元素

:last-child 匹配父元素的最后一个子元素

: root匹配元素在文档的根元素。在HTML中，根元素永远是HTML

:empty匹配没有任何子元素（包括text节点）的元素

（4）*状态伪类选择器

: link设置超链接a在未被访间前的样式。
:visited 设置超链接a在其链接地址已被访间过时的样式

:active 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
*:hover 设置元素在其鼠标悬停时的样式
* :focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配用户界面上处于可用状态的元素

:disabled匹配用户界面上处于禁用状态的元素

:checked匹配用户界面上处于选中状态的元素

: not(selector)匹配不含有selector选择符的元素

: : selection设置对象被选择时的样式

（5）其他伪类选择器N

E:not(s) :{attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg){background-color:#00FFO0;}

三、CSS常用属性

1.color颜色属性

2.字体属性：font

font:简写

*font-size:        字体大小: 20px，60%基于父对象的百分比取值
*font-family :        字体:宋体，Arial
font-style:        normal正常;italic斜体;oblique倾斜的字体
*font-weight:        字体加粗: bold
font-variant:        small-caps小型的大写字母字体
font-stretch:        [了解]文字的拉伸是相对于浏览器显示的字体的正常宽度（大部分浏览器不支持）。

3.文本属性

text-indent:        首行缩进:text-indent :2em;
text-overflow:        文本的溢出是否使用省略标记（...)。clip|ellipsis（显示省略标记)
*text-align:        文本的位置:left center right
text-transform:        对象中的文本的大小写: capitalize(首字母)|uppercase大写|lowercase小写*text-decoration:        字体画线:none无、underline下画线，line-through贯穿线
text-decoration-line:        [了解]文本装饰线条的位置（浏览器不兼容)
*text-shadow:        文本的文字是否有阴影及模糊效果
vertical-align:        文本的垂直对齐方式
direction:        文字流方向。ltr / rtl
white-space:nowrap;/*强制在同一行内显示所有文本*/

*letter-spacing: 文字或字母的间距

word-spacing:        单词间距
*line-height:        行高
*color:        字体颜色

4.背景属性：background

background:简写

*background-color:背景颜色

*background-image: 背景图片

*background-repeat:是否重复，如何重复?(平铺)

*background-position:定位

background-attachment:是否固定背景，
scroll:默认值。背景图像是随对象内容滚动

fixed:背景图像固定

css3的属性:
*background-size:背景大小，如 background-size:100px 140px;

多层背景:
background : url(test1.jpg） no-repeat scroll 10px 20px,
url(test2.jpg)no-repeat scroll 50px 60px,

url(test3.jpg)no-repeat scroll 90px 100px;
background-origin:content-box , content-box, content-box;

background-clip:padding-box,padding-box, padding-box;

background-size:50px 60px , 50px 60px , 50px 60px;

5.边框

border:宽度样式颜色;

border-color;
border-style;边框样式:solid实现，dotted点状线，dashed虚线

border-width:
border-left-color;
border-left-style;

border-left-width:
csS3的样式
border-radius:圆角处理
box-shadow: 设置或检索对象阴影

margin:        检索或设置对象四边的外延边距,如margin: 10px;margin: 5px auto;
margin-top:        检索或设置对象顶边的外延边距
margin-right:        检索或设置对象右边的外延边距
margin-bottom:        检索或设置对象下边的外延边距

margin-left: 检索或设置对象左边的外延边距

6.position定位

*position:        定位方式:absolute(绝对定位)、fixed（固定)（relative定位参考
可对内部相对absolute定位)
*z-index:        层叠顺序，值越大越在上方。
*top:        检索或设置对象与其最近一个定位的父对象顶部相关的位置
right:        检索或设置对象与其最近一个定位的父对象右边相关的位置
bottom:        检索或设置对象与其最近一个定位的父对象下边相关的位置
*left:        检索或设置对象与其最近一个定位的父对象左边相关的位置

7.Layout布局

*display:        是否及如何显示:none隐藏，block块状显示...
*float:        指出了对象是否及如何浮动:值none \ left l right
*clear:        清除浮动:none \ left | right / both两侧
visibility:        设置或检索是否显示对象。visible|hidden|collapse。
                      与display属性不同，此属性为隐藏的对象保留其占据的物理空间
clip:        检索或设置对象的可视区域。区域外的部分是透明的。rect(上-右-下-左)如:clip:rect(auto 50px 20px auto);上和左不裁剪，右50，下20.
*overflow:         超出隐藏:hidden，visible:不剪切内容
overflow-x:        内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y:        内容超过其指定高度时如何管理内容

使用Python进行页面开发——CSS相关推荐

篇一、Flask打造 Python Web 开发的灵活框架，实现简易登录。要求有 Python、HTML 和 CSS 基础。
⭐ 简介:大家好,我是zy阿二,我是一名对知识充满渴望的自由职业者. ☘️ 最近我沉溺于Python的学习中.你所看到的是我的学习笔记. ❤️ 如果对你有帮助,请关注.点赞,让我们共同进步.有不足之处 ...
css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度文章目录 html响应式网页设计:自动适应屏幕宽度背景一."自适应网页设计"的概念二.允许网页宽度自动调整-使用meta标签:vie ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,"无序列表"的 ...
python人机交互界面设计_python_GUI页面开发
GUI:人机交互图形化界面,图形页面窗口,Windows系统就是一个庞大的GUI界面,比命令行更加让人得以接受,使用更加简便在python中的GUI界面是由tkinter提供的,使用前需导入变量 ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板...
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
HTML5响应式手机模板：电商网站设计——歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板
HTML5响应式手机模板:电商网站设计--歪秀商城手机端开发静态页面HTML+CSS+JavaScript 手机模板wap 手机网站模板企业手机网站模板手机网站模板手机模板响应式手机网站 ht ...
django 按钮的样式_【实战演练】Python+Django网站开发系列11-成绩查询与成绩录入...
#本文欢迎转载,转载请注明出处和作者终于做到最后一步了,选课.删除.已选展示.修改密码等功能都已经完成,剩下查询已选课程的成绩(学生界面)与成绩录入(老师界面).其中成绩查询的页面与之前做过的基本上 ...
python web开发要学什么_Python WEB开发用Python开展web开发必须学习什么?
用Python开展web开发必须学习哪些? 针对新手想更轻轻松松的学好Python开发技术性,Python网络爬虫,Python数据分析,人工智能技术等技术性,这儿给大伙儿共享一套系统软件教育资源,加 ...
python 全栈开发，Day128(创建二维码,扫码,创建玩具的基本属性)
python 全栈开发,Day128(创建二维码,扫码,创建玩具的基本属性) 昨日内容回顾 1.app播放音乐plus.audio.createPlayer(文件路径/URL)player.play( ...

使用Python进行页面开发——CSS