python学习_day50_前端之CSS渲染

  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

一、CSS引入方式

1、行内引入方式

  行内式是在标记的style属性中设定CSS样式。只能对本标签内的内容进行渲染,这种方式没有体现出CSS的优势,不推荐使用。

2、嵌入引入方式

  嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中,针对单个文件适用。格式如下:

3、链接方式

  当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

4、导入方式

二、CSS选择器

1、基本选择器

  (1)标签选择器:通过标签名进行定位选择

  (2)id选择器

  (3)class选择器

2、组合选择器

  通过基本选择器按照规则的组合,可以实现更精确的选择,称为组合选择器。

(1)后代选择器

(2)子代选择器

时间: 2024-10-12 18:39:51

python学习_day50_前端之CSS渲染的相关文章

python学习_day52_前端基础之CSS布局3

一.定位属性position 1.相对定位relative 相对定位是相对于该元素在文档流中的原始位置,即以自己原始位置为参照物.有趣的是,即使设定了元素的相对定位以及偏移值,元素还占有着原来的位置,即占据文档流空间.对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.示例如下: 2.绝对定位absolute 设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块(即b

python学习_day62_前端基础之Bootstrap全局CSS样式

一.布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器.我们提供了两个作此用处的类.注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套.分别为: <div class="container"> //.container 类用于固定宽度并支持响应式布局的容器. ... </div> <div class="container-fluid"> //.container-flui

python 学习笔记十二 CSS基础(进阶篇)

1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css存在方式: 元素内联 页面嵌入 外部引入 语法:style = 'key1:value1;key2:value2;' 1.元素内联(在标签中使用css) <!--在标签使用--> &

python之路-----前端之css

本篇内容 CSS 语法 css的四种引入方式 css选择器 css属性操作 Caution! 后台管理布局 css响应式布局 一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: value } 例如: 二.CSS引入方式(4种) CSS引入有4种方式:行内式,嵌入式,链接式,导入式 2.1 行内式  行内式是在标签的style属性中设定CSS样式.这种

python学习_day54_前端基础之js(2)

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String.Math.Array.Date.RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的. 一.字符串String对象 1.字符串对象的创建 //方式一:变量 = "字符串" s="HEllo world"; //方式二:字串对象名称 = new String (字符串) a=n

python学习_day59_前端基础之jQuery入门2

一.样式操作 1.css样式 <body> <div class="c1">111</div> <script src="jquery-3.2.1.min.js"></script> <script> //css赋值操作 $(".c1").css("color","red"); $(".c1").css("

python学习_day55_前端基础之JS(3)

DOM(document object model)对象把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树),定义了访问和操作HTML文档的标准方法. 一.查找标签 1.直接查找标签 总共有如下四种直接查找的方式: document.getElementById("idname") //通过id名 document.getElementsByTagName("tagname") //通过标签名 document.getElementsByName(&quo

python学习_day60_前端基础之jQuery入门3

一.文档操作 (一)插入儿子元素 1.添加到指定元素内部的后面 $(A).append(B):B作为A的最后一个儿子元素:$(A).appendTo(B):A作为B最后一个儿子元素.以上两种A必须为jQuery对象,而B既可以是DOM对象,又可以是jQuery对象,应用实例如下: <body> <ul> <li>111</li> <li class="c1">222</li> <li>333</l

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,