CSS样式学习-2

11种常用css样式学习大结局滚动条与显示隐藏

滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/*左右滚动*/overflow: hidden;/*截取*/overflow: auto;/*自动*/显示与隐藏可以用display/* display: none; *//* display: block; *//* display: inline-block; */visibility显示与隐藏v…

bootstrap全局CSS样式学习

参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式只通过使用bootstrap.css,即可获得统一的样式设置.在使用全局bootstrap的样式时,只需=设置每个元素的class属性值即可. 同意基础样式,防止不同浏览器的样式不同,使用了Normalize.css. bootstrap需要为页面内容和栅格系统包裹一个在一个容器中.共有两个有此作用的class .container 类用于固定宽度并支持响应…

Boostrap入门级css样式学习

1. 自适应网页设计首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" content="width=device-width, initial-scale=1"> 1 上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%. 所有主流浏览…

2019-02-15 CSS样式学习——（内容来自mooc北京林业大学web前端开发授课ppt）

CSS样式的添加方法行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link:css+快捷键实现 CSS的选择器类型 1.标签选择器 2.**类别选择器** 3.ID选择器注:id选择器应当具有唯一性. 4.嵌套声明 5.集体声明 6.全局声明 CSS样式 1.单位 px,em,% 2.颜色 3.文本 4.字体简化font: 5.背景 6.超链接其中,:被称为伪类选择器…

css样式学习笔记

视频参见php中文网玉女心经视频教程讲解的相当的清楚和明白第1章 :css快速入门 1.1 什么是css 改变html框架的样式. 1.2 css的三种引入形式第一种形式:直接在元素后面使用style的形式 <html> <body style="background:pink;"> <p>这是段落.</p> <p>段落元素由 p 标签定义.</p> </body> <…

html之CSS样式学习笔记

本文内容: 字体样式文本样式背景样式尺寸样式盒子模型边框样式边距样式浮动布局定位布局 [CSS3]伸缩布局标签显示方式列表样式 [CSS3]过渡样式 [CSS3]变换样式之2D变形 [CSS3]变换样式之3D变形 [CSS3]动画样式首发日期:2018-04-04 修改: 2018-05-02:增加了CSS3的常用样式,增加了对各种样式的使用说明.去掉了一些无关样式的内容. 这里不讨论CSS选择器,如果想要了解,可以参考我的另外一篇博文,我已经划分明了了, http://w…

CSS样式学习-3、轮廓、伪类/元素、display-flex布局

一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thick粗轮廓.inherit规定从父级继承.length可以规定大小px outline-style轮廓样式,属性:none无(默认值).dotted点状.dashed虚线.solid实线.double双线.groove凹槽3D.ridge凸槽3D.inset凹边3D.outset凸边3D(3D效果取决…

CSS样式学习-1

一.分类 ①内联,写在标签中,写法是style="样式属性".优先级最高. 优点:控制精确.缺点:代码重用性差,范围小. 例如: <div style="font-size=12px;"></div> ②内嵌,在<head></head>中书写. 优点:代码重用性好,范围大.缺点:控制性差,不精确.优先级最差. 注释方法:/*注释内容*/ 例如: <style type="text/css"…

css样式学习小知识

1. 使用百分比设置宽高自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. input进度条 <input type="range" value=0 style=""> 进度条,可以随意拖拽,定位. 这两个样式设置拖拽后颜色,background-size: 0% 100%; background-color: #ccc;…

bootstrap 学习 ---css样式学习

bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在bootstrap.js之前引入 ie8需要引入response.js配合才能实现对媒体查询的支持,另外还需引入html5shiv.min.js 为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到页面中: <meta http-equiv="X-UA-Compa…

CSS ------ 样式学习（一）

CSS 指层叠样式表 (Cascading Style Sheets) :定义如何显示 HTML 元素(一套自定义的衣服) 语法: 由选择器和声明(可以是一条或多条)构成, 声明以大括号({})括起来,由一个属性和一个值组成,每个属性有一个值.属性和值被冒号分开,以分号(;)结束 p { color:red; text-align:center; } 选择器:给特定空间添加样式,常用的有元素选择器(标签名),类选择器(.).id 选择器(#),通用选择器(*) 其他选择器一.减少css 代码…

CSS样式学习笔记『W3School』

1.选择器+声明声明:属性+值eg:h1{color:red;font-size:14px;}颜色:p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}单词时:p{font-family:"sans serif";} 2.选择器的分组h1,h2,h3{color:green;}3.继承body{font-family: Verdana,sans-serif;}如果浏览器不支持继承:b…

一.大小 ①width宽:height高. !注释:<a><span>无法使用该方法调整大小控制元素的大小:宽高.下例是宽高分别100像素的div标签. <div style="width:100px; height:200px;"> </div> 二背景 background-color背景色 background-image背景图 background-size大小(auto自动.在repeat-no情况下over宽高比不变,超出部…

JS笔记一：动态修改css样式

---恢复内容开始--- 最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解. 一.通过Javasript修改图片大小通过函数来传递图片id,height,width,使用document.ElementByID来控制图片的大小,也就通过id 控制图片,之前有学过一句document.getElementByTagName('img')[0],这里也可以通过这种方式来设定固定的图片. 在前一篇有写过如何写这个图片的样式,在图片的基础加上能够放大以及回放图片,先来看看这个的分…

html学习第二天—— 第七章——CSS样式基本知识

外部式css样式,写在单独的一个文件中外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:<link href="base.css" rel="stylesheet" type="text/css" />注意:1.css样…

bootstrap学习总结-css样式设计(一)

由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建的标准化框架工具,已经写好了css.js样式,只需要拿来用即可. 怎么用bs呢?主要是通过使用不同的类增加效果,每一种类,对应的功能不同. bs好处:增加了开发效率,页面设计更加美观,支持响应式开发.下载地址:https://github.com/foreverjiangting/bootstra…

HTML+CSS学习笔记 (7) - CSS样式基本知识

HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red">这里文字是红色.</p> 注意要写在元素的开始标签里,下面这种写法是错误的: <p>这里文字是红色.</p…

HTML&CSS基础学习笔记1.29-灵活地使用样式

灵活的使用样式使用样式的感觉很棒吧! 刚我们使用的内联样式是给具体的标签加上样式,如果有多个标签的时候,我们用内联样式给标签加样式的时候就需要一个个的加过来,这样就很麻烦. 而如果我们使用内部样式表,我们只需要定义<p>标签的文字大小,所有<p>标签就都具有这个样式了. 看个例子吧: 更加实用的使用方式使用内部样式表,我们能够把页面上的共通样式提取出来.可以省去很多工作量.但是内部样式表并不是最好的方法,比如说,另一个页面也需要这些样式呢? 相对而言,我们更愿意使用外链样式表,…

HTML&CSS基础学习笔记1.28-给网页添加一个css样式

CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 我们可以这么说,CSS是网页的衣服,它可以用来装饰网页. 那么接下来我们就来试试css吧~ 给网页添加一个CSS样式尝试给<p>标签直接加了一个[style]属性,并且给标签添加了一个字体颜色.这种在标签上直接添加样式的形式,我们称这种关联方…

HTML&CSS基础学习笔记1.12—引入样式表

引入样式表我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用<link>标签了,它起到将CSS样式链入页面的作用. <link>标签属于头部标签,一般嵌套在head标签内,定义了文档与外部资源的关系,最常见的用途是链接样式表. <link>标签链接样式表的写法: <link href="XX.css" rel="stylesheet" type="t…

ReactNative学习之css样式使用

前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascading Style Sheets(级联样式表)的缩写. CSS 是一种样式表语言,用于为 HTML 文档定义布局.例如,CSS 涉及字体.颜色.边距.高度.宽度. 背景图像.高级定位等方面. CSS 跟 HTML 的区别在哪里? HTML 用于结构化内容:CSS 用于格式化结构化的内容. 采用 CSS 有哪些好处? CSS 是 Web 设计界的…

从零开始学习html（七）CSS样式基本知识

一.内联式css样式,直接写在现有的HTML标签中 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>认识html标签</title> <style type="text/css"> span{ color…

11种常用css样式之表格和定位样式学习

table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4缺一带你了解相对还是绝对抑或是固定定位,实现div绝对居中法/*父定位子绝对,子的坐标系是父的左上角:*/绝对定位和相对定位的相同点:脱离文档流,都在文档流的上方;不同点(1)绝对的坐标系在浏览器的左上角,相对的坐标系在自己的左上角(2)绝对不占位,相对占位;最后/*z-index定位层级高度,只能…

11种常用css样式之鼠标、列表和尺寸样式学习

鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认文本形状*/cursor:default;/*箭头指示形状*/cursor:help;/*帮助形状*/ 列表(list-style-type):none/*把列表前面的选项去除*/disc/*实心*/circle/*空心*/square/*方块*/decimal/*序列*/lower-roman/*小写罗马*/uppe…

11种常用css样式之border学习

边框border通常简写为"border:1px solid red;"但其实一个完整的border边框其实是由1.border-width/*边框宽度*/,2.border-style/*边框样式*/,3.border-color/*边框色彩*/三大属性构成构成; border边框方位分为border-top/*边框上方*/border-bottom/*边框底部*/border-left/*边框左边*/border-right/*边框右边*/; 边框属性样式整理:border-sty…

11种常用css样式之background学习

background如何简写?如何在背景图像不变的情况下,依旧实现页面文字滚动,为之奈何?别担心,快用background-attachment: fixed;/*固定定位*/常用的background样式如下,1.background-color2.background-image3.background-repeat4.background-attachment5.background-position,废话不多扯,直接代码页面展示: <!DOCTYPE html> <html la…

11种常用css样式之开篇文本字体学习

常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏文本:1.letter-spacing/*字间距*/2.word-spacing/*词间距*/3.text-decoration/*下划线*/4.text-align/*对齐*/5.text-indent/*缩进*/6.line-height/*行高*/7.color/*颜色*/8.word-break/*文本折行*/ 字体:1.f…

学习了解CSS3发展方向和CSS样式与优先级

通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on CodePen其次html嵌套css样式分为3种:内联.内部.外部.写法上推荐的是外部,便于代码复用性:样式表的写法是选择器{设置样式}:css中常见的注释为/**/:css的优先级:内联style>id选择器>class选择器>标签:在css中,文本默认字体大小16px,长度单位分为px像素与e…

css扁平化博客学习总结（二）css样式重置

css样式重置方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline:…

CSS3学习笔记-1：CSS样式继承

自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个…

【CSS样式学习-2】的更多相关文章