1 网页样式

1.1 引入方法

1.1.1内联样式

<标记名 style="样式属性：样式属性值；样式属性：样式属性值；·······"></标记名>

<div style="font-size:20px; line-height:30px; text-align:center: ">设置想要输入的文本</div>

1.1.2内部样式表

<style type = "text/csS">

选择符1{样式属性：样式属性值;样式属性：样式属性值…}

选择符2{样式属性：样式属性值；样式属性：样式属性值;…}

选择符3{样式属性：样式属性值；样式属性：样式属性值;⋯}

</style>

在<head>中引入<style>



<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

1.1.3链接外部样式

rel=“styesheet”用来定义链接的文件与html之间的关系
styesheet值表示指定一个固定或者首选的样式
type="text/css"指文件的类型是样式表文本

href="style.css"文件所在的位置

<head>

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

</head>

1.1.4导入外部样式

<style>

    @ import ulr("样式路径")

</style>

导入外部样式使用import方法，常用如下

@ import ulr("样式路径")；
@ import ulr(样式路径)；
@ import "样式路径"；
@ import ‘样式路径’；

1.2 基础语法

1.3 选择器的分类

1.3.1标记选择器

css

<style>

h1{

color:"red"

}

html

<h1>标签选择器使用</h1>

1.3.2通用选择器

对所有元素都生效
符号表示

*{

margin: 0;

padding: 0;

}

1.3.3 i d选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 "#" 来定义。
id名称是唯一的，只能对应于文档中一个具体的元素

<html>

<head>

<meta charset="utf-8">

<title>id选择器</title>

<style>

#para1{

	text-align:center;

	color:red;

}

</style>

</head>

<body>

<p id="para1">id选择的部分</p>

<p>这个段落不受该样式的影响。</p>

</body>

</html>

1.3.4类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示,
在 CSS 中类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中

所有的 p 元素使用 class="center" 让该元素的文本居中:

<style>

p.center{

	text-align:center;

}

</style>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

2.多个 class 选择器可以使用空格分开

<style>

.center {

	text-align:center;

}

.color {

	color:#ff0000;

}

</style>

<body>

<h1 class="center">标题居中</h1>

<p class="center color">段落居中，颜色为红色。</p>

</body>

1.3.5属性选择器

1.3.6后代选择器

E1 E2{属性1：属性值1;....}

<style type="text/css">

  ul a{

  color:red；

  }

</style>

<body>

     <ul>html:<a href="网址地址">html</a></li>

     <ul>css:<a href="网址地址">css</a></li>

     <ul>javaScript:<a href="网址地址">javaScript</a></li>

     </ul>

</body>

1.4 选择器优先级

1.5 `css`单位

1.6 给标签元素添加属性

2 网页基础样式添加

css网页布局设置总结的更多相关文章

CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
项目实践2:项目中的CSS网页布局(常用)
好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...
CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则稍后在"技 ...
《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
深入理解CSS网页布局-理论篇
在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...
DIV+CSS 网页布局之：混合布局
1.混合布局在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

随机推荐

第六章：Django 综合篇 - 13：发送邮件
在Python中已经内置了一个smtp邮件发送模块,Django在此基础上进行了简单地封装,让我们在Django环境中可以更方便更灵活的发送邮件. 所有的功能都在django.core.mail中. ...
YAML资源清单
YAML 文件基本语法格式在 Docker 环境下面我们是直接通过命令 docker run 来运行我们的应用的,在 Kubernetes 环境下面我们同样也可以用类似 kubectl run 这样 ...
Elasticsearch：Pinyin 分词器
Elastic的Medcl提供了一种搜索Pinyin搜索的方法.拼音搜索在很多的应用场景中都有被用到.比如在百度搜索中,我们使用拼音就可以出现汉字: 对于我们中国人来说,拼音搜索也是非常直接的.那么在 ...
关于Elasticsearch使用java的说明
从Elastic 7.0开始,我们可以不安装JAVA.安装包包含一个相匹配的JAVA版本在里面. Elasticsearch包含来自JDK维护者(GPLv2 + CE)的捆绑版OpenJDK. 要使用 ...
MySQL 自增字段取值
1 前言本文来自回答思否网友的一个问题,这个网友新建了一张表,auto_increment_increment设为10,AUTO_INCREMENT主键起始值设为9, 当他插入数据的时候,发现主键值 ...
2_Servlet
一. 引言 1.1 C/S架构和B/S架构 C/S 和B/S是软件发展过程中出现的两种软件架构方式 1.2 C/S架构(Client/Server 客户端/服务器) 特点: 必须在客户端安装特定软件 ...
Python对字符数据进行清洗
import re mystr = "hahaAAA哈哈綂123./!#鱫愛" str1 = ''.join(re.findall('[\u4e00-\u9fa5]',mystr) ...
Springboot集成阿里云短信
目录 1 前言 2 准备工作 2.1 了解流程 2.2 配置信息 2.3 短信签名和模板 2.3.1 签名 2.3.2 模板 2.3.3 存入数据库 3 SDK 4 集成Springboot 4.1 ...
Bug改不完，迭代总延期，咋办？
摘要:本文从流程上需要改进的地方进行讨论,分四个方面来分析产生这个问题的原因. 本文分享自华为云社区<Bug改不完,迭代总延期,咋办?>,作者: 华为云PaaS服务小智. 前言随着互联网 ...
2022.3.12 提高A组总结&反思
今天有点上头了 T1:开场秒,大水题,一眼莫队了,最后没打 T2:开场以为是费用流,后来发现费用流做不了,在做T3的时候突然发现可以状压,也没打 T3:这道题给我极大的亲切感,导致我一个上午硬钢这道题 ...

css网页布局设置总结

1 网页样式

1.1 引入方法

1.1.1内联样式

1.1.2内部样式表

1.1.3链接外部样式

1.1.4导入外部样式

1.2 基础语法

1.3 选择器的分类

1.3.1标记选择器

1.3.2通用选择器

对所有元素都生效

1.3.3 i d选择器

1.3.4类选择器

1.3.5属性选择器

1.3.6后代选择器

1.4 选择器优先级

1.5 css单位

1.6 给标签元素添加属性

2 网页基础样式添加

css网页布局设置总结的更多相关文章

随机推荐

热门专题

1.5 `css`单位