多选框其他,css基础,选择器基础

多选框

  在多选框中如果想默认选中时,可以加入 checked 属性,属性值也为 checked

  在选择时,如果想要达到,点击文字也能选中的效果,要利用  label  标签,

  要在选项标签的 id  和  label  之间建立联系   

  <input id="app" type="checkbox"/>  

  <label   for=“app”>这里写可以点击的文字</label>    <!-- input 选项标签的 id  作为 for 的属性值-->

CSS 概念

  css: cascading style sheets ,层叠式样式表,规定了 html 标签在网页上的显示样式

  html4 的时候,w3c 组织将html的结构和样式做了分离

  前端三层:

    html  结构层,打造网页的整体架构

    css   样式层,装饰页面

    JavaScript   行为层,一些页面交互效果

CSS 作用

  css两个重要的概念:层叠式,样式。

  样式:html标签在页面的显示效果

  某一个标签有什么样式,直接将对应的属性及属性值罗列出来

  css样式设置的时候,有两个关键:选择器,样式表

  css作用细化:

    1.给文本添加文字显示样式

    2.给盒子添加属性进行结构布局

css小属性:

  1.文本样式:字体,颜色,大小

    大小:font-size。本身是一个复合属性 font,里面的单一属性,需要用 font- 单一属性名。---属性值,以像素为单位

    颜色:color:red

    字体:font-family,常用英文字体有:Arial,consolas,中文字体:“宋体”

    font-family:"Arial","consolas","宋体"------------字体用引号包裹,字体之间用逗号隔开。

    为了追求加载速度,将一些中文字体名字写成英文表示法 

    微软雅黑:Microsoft Yahei

    宋体:SimSun

  2.盒子实体化基本属性

    实体化:给盒子指定,高,宽,边框,背景色

    宽:width  单位,像素

    高:heigth  单位,像素

    背景色:background-color

    边框:border,复合属性,有多个属性值,属性值之间用空格隔开,边框的宽,颜色,线的类型

    实线边框:solid

    将代码上传到网上,为了提高加载速度,需要将所有的空格,缩进,换行等删除,压缩代码。

选择器

    类选择器多用于样式,id多用于行为

高级选择器

  基础选择器并不能满足所有的需求,所以就有了以下三种:

    1.后代选择器 ----空格 左侧 是右侧的祖先元素

      通过标签之间的嵌套关系,层级关系,限定我们大体范围,在范围内具体查找相关元素

     2.交集选择器

       交际使用的基础选择器,可以都是类选择器,可以使标签和类的混写

      IE6 不支持类的连续交集

     3.并集选择器

      很多元素可能都有相同 css 样式,可以通过并集选择器将这些标签写在一起,同意设置 css 样式。

      前面所有选择器都可以作为并集里的一项,在选择器中间用逗号隔开。

      也就是多个选择器选中的元素使用同一个样式。

  

   

原文地址:https://www.cnblogs.com/really-insist/p/11617837.html

时间: 2024-08-29 16:25:08

多选框其他,css基础,选择器基础的相关文章

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

转 纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

【转】纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

纯CSS设置Checkbox复选框控件的样式

下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一段代码到你的CSS文件中. 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中.这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框. 样式一 此复选框

jQuery 获取多选框值,以及多选框中文的函数实践 by FungLeo

jQuery 获取多选框值,以及多选框中文的函数实践 by FungLeo 前言 本方法是我刚在项目中用的方法.可能有更加好的方法.但我不清楚. 搜索了几个方法,好像都有错误,不知道是别人的错误,还是我的错误.因此,我自己构造了以下方法,便于我在实践中使用. 分享出来,有谬误请大家指出. DOM结构 我的多选框的dom结构,都是下面这种的.都是基础知识,不做过多阐述. <label class="input_checkbox"> <input type="c

css节点选择器

基础选择器 基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器 标签选择器 类选择器 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #css代码 [href="http://www.baidu.com/"] {font-size: 12px;} #html代码 <a href="http://www.baidu.com/>百度</a>" 通配选择器:就是特殊符号*,一般不建议单独

关于IE下复选框的样式问题

一.为什么复选框与后面的文字有间距 1.在FF,chrome,Safari等浏览器,是由margin引起的,也就是checkbox有默认margin-right:3px.(FF下复选框默认margin值为3px 3px 3px 4px,chrome与之一致 )2.IE6-IE8是由本身引起的. FF的虚框直接依附在复选框本身的边框上,IE6是偌大的区域,复选框只是位居其中,IE8下虚框的范围更加对称. 给复选框加border和background,IE6下如图,IE7类似,IE8更对称些,FF下

jQuery_review之jQuery实现多选框的反选、全选、全不选

有几个非常常见的知识点,需要重点关注一下.如何显示多选框呢?<input type="checkbox" name="name" value="value1"><input type="checkbox" name="name" value="value2">.这样就能表示两个多选框,他们具有同样的name值,在JSP中,传到后台的时候,可以使用request.g

Web前端之复选框选中属性

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解.翻译的目的一是分享给大家,二是方便自己查阅.原文链接是:http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.

【转载】checkbox复选框的一些深入研究与理解

转载来自:原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.一开始的唠叨最近忙于开发,自淫于项目的一步步完工,心浮躁了.舍近而求远,兵家之大忌.我是不是应该着眼于眼前的东西,好好的静下心来,超过一般人的沉静与沉浸,研究最基本的东西呢?这番思考,让我找到了一些方向. 对于checkbox,从我开始接触HTML开始,陆陆续续也研究过好多次,然而多是零星的知识点的累加,或是掌握了些表象的东西,是否深入核心,是否深入其本质,是否有了完善的总结,是否