HTML CSS样式基础(必看篇)

2020-03-24 15:59:56

字体：大中小

来源：转载

供稿：网友

Cascading Style Sheet 级联样式表改变样式的一个工具，说白了，就是为了让我们的页面好看，HTML底层封装了css这样一个工具。2.怎么使用cssa、style 风格、样式这个关键词写到标签内部，可以修改标签的样式注意：写在标签内部！也就是里面3.css样式，分为三种a、行内样式表 p >其中： >b、内部样式表选择器：告诉程序，我们要改变谁的样式。id选择器：1、在标签内加上id属性2、在写之前，要加上#
CSS Code复制内容到剪贴板
styletype= text/css //style关键词 p{//p标签，标签选择器，查找所有相对应的标签 color:#F33;//要改变的样式。 } /style
注意： 1、style里面要写上type属性，标识这是改变css
2、选择器后面要加上一对{} ，
3、每一句改变样式之后，要加上;c、外部样式表写在我们网页的外面1、新建一个css
2、在css中写上相对应的样式
3、将css样式导入网页a、 link href= 1.css rel= stylesheet type= text/css / b、 style type= text/css @import url( css路径 /style d、样式表的优先级行内样式表内部样式表外部样式表e、选择器的优先级id选择器类选择器标签选择器f、并集选择器通过一个详细的描述或者说地址来查找某一个或者某一组相对应的标签p,#id,.html' target='_blank'>class{}会改变所有p、id和class所覆盖的标签样式，中间用英文输入法的 , 号隔开g、交集选择器h3.cecond{}会先查找h3标签，再查找所有h3标签里面的类名为second的标签修改属性中间没有任何东西进行连接h、后代选择器CSS Code复制内容到剪贴板
会根据所写的标签或者选择器，进行一层一层的查找，直到最后查找到所需要的标签，中间用隔开小结：标签选择器是直接应用于所有的HTML标签
类选择器可以在页面中多次使用
id选择器在页面中只能使用1次i、css属性
1、字体样式：
font-style：设置字体风格
font-weight：设置字体粗细
font-size：设置字体尺寸
font-family：设置字体系列
font：把以上所有的设置全部设置在一个属性中
2、文本样式：
color：设置字体颜色
line-height：设置行高
text-align：设置文本的对齐方式
text-decoration：设置文本的装修，例如：underline、none、line-through3、背景属性：
background-color：设置背景颜色
background-image: 设置背景图片
background-position：设置背景的位置
background-repeat：设置背景的填充方式
background 设置背景，把以上所有的设置全部设置在一个属性中4、列表属性：
list-style-image：将列表设置为列表标识
list-style-type：设置列表的标识类型，disc实心圆，circle空心圆，
square正方形
list-style：把以上所有的设置全部设置在一个属性中5、超链接的伪类
a:link{ 未访问的链接
color:#F00;
}
a:visited{ 已访问的链接
color:#6F6;
}
a:hover{ 鼠标悬浮改变样式
color:#FCC;
}
a:active{ 鼠标长按改变样式
background-color:#0FF;
}6、cursor属性
url 设置自定义鼠标样式
default 默认光标
pointer 超链接的指针
wait 程序正在忙
help 指示可用的帮助
text 指示文本
crosshair 十字型
move 可移动指针7、盒子模型
a、什么是盒子模型？
把相对应的元素放入到一个容器中，可以进行相对应的处理
移动或者处理这个盒子模型的同时，整个在盒子模型中的元素都会跟着
被处理。边距：
内边距：
padding：top,left,right,bottom
外边距：
margin：top,left,right,bottom
b、浮动
什么是浮动？
其实原理就是align浮动的属性：
left：左浮动
right：右浮动
none：不浮动clear属性：清除浮动，both全部清除c、overflow属性
当有元素溢出时，应如何处理visible 默认的
auto 自动的
hidden 隐藏
scroll 加上滚动条d、iframe标签
内联框架。
可以导入其他东西。 iframe src= 1.html width= 1366px height= 200 scrolling= no
frameborder= 0
src：导入其他的页面路径
width：调整导入的页面的宽度，px是单位，可以不加，默认就是px
height：调整导入的页面的高度
scrolling：是否显示滚动条
frameborder：是否显示边框，1表示显示，0表示不显示e、position属性
定位。
相对定位：
relative，相对他原来的位置，进行移动。绝对定位：
absolute，fixed
定位到网页的某个地方，一直不变。
static偏移值的设定
X轴(left、right 属性)与Y轴（top、bottom属性）
可取值：像素或百分比以上这篇HTML CSS样式基础(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/w13248223001/archive/2016/07/22/5697519.html更多编程语言

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：2013年五大主流浏览器 HTML5 与 CSS3 兼容性大比拼

下一篇：使用CSS3美化HTML表单的技巧演示