CSS学习(一)

最新推荐文章于 2024-09-15 19:00:01 发布
原创 最新推荐文章于 2024-09-15 19:00:01 发布 · 140 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何从头开始编写CSS，包括创建HTML文件、设置h2标题样式、内外联样式及选择器应用。通过实例演示了如何将CSS与HTML结合，理解specificity和styling技巧。

开始一个CSS文件

先生成一个我们想要的Html文件
快捷键：html:5+tab
就会出现html5模板
然后创建一个首页
在这里插入图片描述

在同一文件建立一个css文件。
css语法格式类似：
在这里插入图片描述
将CSS和html文件联系起来
这是外部样式表
在这里插入图片描述
想设置h2标题为红色

CSS是cascaded，以最后的为准
在这里插入图片描述
在浏览器中右键检查，可以直接查看样式，并做出一定修改
在这里插入图片描述
如果是某个特定的元素，可以用到内联样式
在这里插入图片描述

还有一种是内部样式表 和外部样式表一样是放在head里面的
在这里插入图片描述

CSS Properties

在这里插入图片描述
参考网站css-tricks
里面是properties大全
在这里插入图片描述

CSS Selector

在这里插入图片描述
css_selectors

CSS父元素应该在子元素前面
CSS有以下几种常见选择器
.class
在这里插入图片描述
在这里插入图片描述

#id
id是唯一的
在这里插入图片描述
在这里插入图片描述

是代表所有的
一般放在CSS开头
但是子元素有定义的话，就按子元素得来
在这里插入图片描述

element
在这里插入图片描述

element,element
在这里插入图片描述
element element
选中所有的在h2里面的p
在这里插入图片描述
element > element
选中所有父元素中有h2的p
在这里插入图片描述
element + element
选中所有跟在h2后面的p
在这里插入图片描述
hover
把鼠标移动上去后显示的样式
在这里插入图片描述

只针对第一个或者最后一个 first-child last-child
在这里插入图片描述
What Selector win out in the cascade depends on:
如何判断选择器的重要程度
specificity
越详细就会越重要（内联最高）
important
加在某个上面，就会以这个为标准
source order
我们有两个links链接css，以最后的那个css为准

Text and Font

在这里插入图片描述

如果没有字体样式，可以直接加一个link从google font下

CSS中的图片

在这里插入图片描述

在这里插入图片描述
footer
需要有个clear，保证注脚在文字和图片下面
在这里插入图片描述

Box Model箱子模型

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

CSS尺寸换算(px vs em vs rem)

em直接是父元素的倍数
在这里插入图片描述
rem是针对根元素的倍数
在这里插入图片描述

dw创建关联css文件,Dreamweaver怎么给网页添加样式表的关联?
weixin_34550555的博客
08-03 1163
现如今，网页制作以及建站成了人人需要掌握的技能，小编也从各方面得到需求说，以前有过PS的入门教程，现在能不能做一个DW的入门教程。那么从今天开始，小编将用一些时间，为大家带来DW的入门教程。只要能坚持，你也能成为大神。1、我们首先要做好基本的网站站点架构，文件夹以及子文件等全部建立完毕，那么我们怎样建立一个样式呢？首先在css根目录下建立一个页面，命名为main.css2、好，如果我们希望，我们的...
新建HTML关联CSS步骤
esqlbejsqw的博客
04-29 729
1. 首先新建一个文件夹，用来存放编辑时所需要的资料. 2. 打开DW软件. 3. 新建HTML有两种方法第1种，使用快捷键“Ctrl N”，新建网页选项卡。 第2种，点击软件左上角“文件”，再选择“新建”. 4. 弹出“新建文档”选项卡，文档类型选择第一个HTML 框架，然后点击创建. 创建完如下图. 5. 同上步骤，CTRL+N 新建另一文档然后选择CSS样式，点击创建, 然后将以创建好的CSS文档保存至刚刚新建好的文件夹，然后返回创建好的HTML文档. 6. 在</head>上面打入&lt
CSS学习路线
警警的博客
09-15 1744
CSS学习路线涵盖了从基础到进阶再到深入探索的各个阶段，每个阶段都有其特定的学习内容和面试中常见的题目。通过系统地学习和实践，你可以逐步掌握CSS的核心技能，并在面试中展现出自己的专业能力和实践经验。
CSS入门学习笔记+案例
热门推荐
itboy
06-16 33万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS基础学习
weixin_68705721的博客
03-31 1878
HTML标签 属性：网页的内容HTML：网页的内容CSS：内容的样式可以实现内容和样式相分离，便于修改样式。2.CSS语法字号color:blue;文字颜色加粗注意：a.要把它们放在p{}（选择器）里b.后面的是属性值，别忘记加分号。
css学习day04
2201_75646248的博客
06-17 2576
属性作用。
最全 CSS 学习指南
weixin_40348267的博客
05-03 4324
在现在的工程化项目中，CSS 的内容不止于上面列出的，比如 CSS3，以及 sass、less，这些是怎么在项目中运用的，后面都会带大家详细学习到。学习常见的 CSS 属性和属性值，如颜色、字体、边框、背景、宽度、高度、间距等。学习如何添加背景颜色、图像、渐变和边框样式到元素中，以及如何控制它们的属性。学习如何控制元素的位置和布局，包括浮动、定位、弹性布局、网格布局等技术。学习如何设置文本的字体、大小、行高、颜色以及文字效果，如下划线、斜体等。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
HTML和Css的学习
SYX_lh的博客
10-19 4725
学习HTML和Css
CSS学习心得
weixin_47223561的博客
03-30 2251
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
HTML+CSS学习总结
weixin_53351919的博客
06-26 3165
html+css学习总结
一个平常的html css学习.zip
01-05
一个平常的html css学习一个平常的html css学习一个平常的html css学习 一个平常的html css学习一个平常的html css学习一个平常的html css学习 一个平常的html css学习一个平常的html css学习一个平常的html css学习...
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
CSS初识初学者思维导图-css学习第一天
12-24
css 目的、样式表分类（位置）、选择器、常见文字css属性
精心整理的一份CSS学习笔记+CSS思维导图
01-08
文章目录一、CSS简介二、选择器2.1 基本选择器：2.2 组合（复合）选择器2.3 选择器的优先级三、盒模型四、CSS思维导图 一、CSS简介 CSS全称：层叠样式表 (Cascading Style Sheets) 。 CSS作用：美化界面，布局页面，...
285个地级市邻接矩阵、经济地理矩阵等8个矩阵数据（2003-2023年）
11-25
01、数据简介 共八个矩阵，各类矩阵通过量化空间关系，为区域政策制定（如交通规划、产业布局）和学术研究（如空间溢出效应、区域收敛）提供关键工具，需根据研究目标灵活选择或组合使用。 数据名称：285个地级市邻接矩阵、经济地理矩阵等8个矩阵数据 数据年份：2003-2023年 参考文献：邵帅,李欣,曹建华,杨莉莉.中国雾霾污染治理的经济政策选择——基于空间溢出效应的视角[J].经济研究,2016,51(09):73-88. 02、相关数据 地级市人均GDP、空间邻接矩阵、空间经济距离矩阵（GDP）、空间地理距离矩阵（经纬度）、空间地理距离倒数平方矩阵（经纬度）、经济地理权重矩阵（GDP和经纬度）、经济地理嵌套矩阵（GDP和经纬度）、空间经济矩阵（非对称）、空间经济地理矩阵（非对称）、纬度、经度、距离
【影视数据分析】基于C++的多维度可视化系统设计：实现高效实时数据处理与交互式决策支持 项目介绍 基于C++的影视数据可视化系统设计和实现的详细项目实例（含模型描述及部分示例代码）
最新发布
11-25
内容概要：本文详细介绍了一个基于C++的影视数据可视化系统的设计与实现，旨在应对影视行业海量、多源数据带来的分析挑战。系统利用C++的高性能优势，实现了大规模数据的高效处理与实时更新，支持多维度数据分析，涵盖票房、用户评价、社交媒体热度等，并通过柱状图、折线图、热力图、词云等多种可视化方式直观展示数据。项目强调用户友好的界面设计、跨平台兼容性、可扩展性与可定制性，结合创新的交互设计，提升用户体验与决策效率。系统不仅服务于影视创作者和营销团队，也为行业数字化转型和创新发展提供数据驱动的支持。; 适合人群：具备一定C++编程基础，从事数据分析、可视化开发或影视行业技术研究的研发人员、软件工程师及高校学生。; 使用场景及目标：①学习如何利用C++构建高性能数据可视化系统；②掌握多源数据融合、实时处理与图形渲染的技术方案；③为影视项目提供数据支持，优化内容创作与市场策略； 阅读建议：建议结合文中提到的模型设计与示例代码进行实践，重点关注数据处理流程、可视化模块实现及系统架构设计，同时可联系作者获取完整代码与GUI资源以加深理解。
CSS插入图片方法[可运行源码]
11-25
本文详细介绍了在CSS中插入图片的多种方法，包括使用background-image属性和background简写属性。通过设置不同的背景属性值，如background-color、background-position、background-size等，可以灵活控制背景图片的显示效果。文章还提供了具体的HTML示例代码，展示了如何在实际项目中应用这些属性。此外，还解释了背景图像默认位于元素左上角并在水平和垂直方向上重复的特性，以及如何通过background-repeat属性调整平铺方式。
jQuery与HTML设置只读/禁用属性[项目代码]
11-25
本文详细介绍了在jQuery和HTML中如何设置和移除表单元素的只读（readonly）和禁用（disabled）属性。在jQuery部分，通过attr()和removeAttr()方法演示了属性的动态操作，并对比了readonly与disabled的区别：disabled会阻止元素获取焦点且表单提交时排除该字段，而readonly仅限制编辑但仍可聚焦和提交。HTML部分列举了三种实现方式（onfocus=this.blur()、readonly、disabled），并附代码示例说明其视觉效果及交互差异（如灰色显示、Tab键切换等）。最后指出两者可结合使用，并补充了CSS屏蔽输入的技巧。
SQL编码规范指南[项目源码]
11-25
本文详细介绍了SQL编码规范的重要性及其具体实施方法。规范化的SQL代码能显著提升可读性、便于问题定位和团队协作。文章强调了大小写的正确使用、单引号与双引号的应用场景、缩进对齐原则、禁止使用SELECT *操作、注释的添加规范以及子句的排版规则等关键点。此外，还提供了表别名的命名建议、字段逗号放置位置等实用技巧，旨在帮助开发者编写清晰、整齐、结构化的SQL代码，从而提升编程效率和代码质量。
CSS边界特效学习包
对于学习者来说，“css-border-effects.zip”压缩包能够提供一个很好的实践和探索平台，通过观察和修改这些示例代码，可以加深对CSS边框及其效果实现方式的理解。在实际开发过程中，熟练运用这些知识点将有助于提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值